Вам нужно больше внимания уделять разметке Bootstrap (HTML).Если вы этого не сделаете, он не будет работать так, как ожидалось.
Определение "сетки" начальной загрузки состоит в том, что должен иметь класс row, а непосредственные потомки имеют класс(е) типа col-*.Простыми словами, столбцы должны быть заключены в строки.Если вы не уважаете это, вы не должны ожидать, что он будет работать так, как задумано.
Если вы хотите еще больше разделить элемент .col-*, вам нужно поместить в него элемент .row и поместитьдругие меньшие .col-* s внутри этого .row.
Кроме того, ваши большие (макет) .row s должны быть прямыми потомками .container или .container-fluid, вы можете иметь .container sвнутри .container-fluid с, но вы не можете иметь .container с внутри .container с.
Если вы внимательно посмотрите на все вышеперечисленные "правила" , они соблюдаются во всех их примерах, но они нигде четко не указаны.Однако, если вы потратите время на то, чтобы понять, как применяется каждый из этих классов, с точки зрения правил CSS, они имеют смысл.
Пример:
.order-type-buttons > .btn:not(#_){
font-size:14px;
color: white;
text-transform: uppercase;
padding-right: 0;
padding-left: 0;
flex-grow: 1;
}
.order-type-buttons > .btn > span {
display: flex;
justify-content: space-between;
}
.button-text.col {
flex-grow: 2;
}
.span-img img {
margin: -7px 0;
height: 5rem;
flex-grow: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12">
<div class="btn-group d-flex order-type-buttons" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">
<span class="row align-items-center no-gutters w-100">
<span class="col button-text">Online Pick Up</span>
<span class="col span-img d-block">
<img class="img-fluid" src="https://dummyimage.com/80x80/007bff/fff" alt="">
</span>
</span>
</button>
<button type="button" role="button" class="btn btn-primary">
<span class="row align-items-center no-gutters w-100">
<span class="col button-text">Online Take out</span>
<span class="col span-img d-block">
<img class="img-fluid" src="https://dummyimage.com/120x80/007bff/fff" alt="">
</span>
</span>
</button>
<button type="button" role="button" class="btn btn-primary">
<span class="row align-items-center no-gutters w-100">
<span class="col button-text">Pick up</span>
<span class="col span-img d-block">
<img class="img-fluid" src="https://dummyimage.com/640x360/007bff/fff" alt="">
</span>
</span>
</button>
</div>
</div>
</div>
</div>
Также обратите внимание, .btn применяет white-space: nowrap ко всем его потомкам, что может быть не тем, что вы хотите.