引導網格在元素內部不起作用

Question

我有一個按鈕組，每行將有3個按鈕。 我的按鈕是帶有圖標圖像的常規自舉按鈕。 我在使用跨度的按鈕內部有一個網格，但是圖標圖像被推出了該列。

HTML：

<div class="container-fluid">
      <div class="row">
          <div class="col-md-6>
           <div class="row">
                 <div class="btn-group order-type-buttons col-12" 
                 role="group" aria-label="First group">
    <button type="button" class="btn order-type-btn-blue col-4"><span class="col-8 button-text">Online Pick Up</span><span class="col-4 span-img"><img class="img-fluid" src="images/icon%20files/online-pickup-icon.png" alt=""></span></button>
    <button type="button" role="button" class="btn order-type-btn-blue col-4"><span class="col-8 button-text">Online Take out</span><span class="col-4 span-img"><img class="img-fluid" src="images/icon%20files/online-take-out-icon.png" alt=""></span></button>
    <button type="button" class="btn order-type-btn-blue col-4"><span class="col-8 button-text">Pick up</span><span class="col-4 span-img"><img class="img-fluid" src="images/icon%20files/pick-up-icon.png" alt=""></span></button>
</div>
<div class="btn-group order-type-buttons col-12" role="group" aria-label="second group">
    <button  type="button" class="btn order-type-btn-blue col-4"><span class="col-8 button-text">Refund</span><span class="col-4 span-img"><img class="img-fluid" src="images/icon%20files/refund-icon.png" alt=""></span></button>
    <button type="button" class="btn order-type-btn-blue col-4"><span class="col-8 button-text">Room Service</span><span class="col-4 span-img"><img class="img-fluid" src="images/icon%20files/room-service-icon.png" alt=""></span></button>
    <button type="button" class="btn order-type-btn-blue col-4"><span class="col-8 button-text">Take</span><span class="col-4 span-img"><img class="img-fluid rounded" src="images/icon%20files/take-out-icon.png" alt=""></span></button>
</div>
           </div>
          </div>
      </div>
</div>

CSS：

.button-text{
    padding-left: 0;
    padding-right: 0;
}

.order-type-btn-blue{
    background-color: #0082d5;
    font-size:14px;
    color: white;
    text-transform: uppercase;
    margin: 2px 2px 2px 2px;
    padding-right: 0;
    padding-left: 0;
}
.order-type-buttons {
    padding-right: 0;
    padding-left: 0;
}
.span-img{
    padding-right: 0;
    padding-left: 0;
}

按鈕在頁面上的外觀：

Answer 1

您需要更加注意Bootstrap的標記（HTML）。 如果您不這樣做，它將無法按預期運行。

Bootstrap“ grid”的定義是它必須具有類row並且其直接后代具有col-*類型的類。 用簡單的話來說，列必須包裹在行中。 如果您不尊重這一點，那么您就不應指望它能按設計執行。

如果要進一步划分.col-*元素，則需要在其中放置.row元素，並將其他較小的.col-*放在該.row 。

另外，你的大（布局） .row S的關系是直接后代.container或.container-fluid ，你可以有.container的內線.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應用於所有后代，而這可能並不是您想要的。

Answer 2

我建議您使用塊元素而不是span ，內聯元素，因此，margin，溢出和span上的某些其他功能將無法與div 。 要使同一行上的內容對齊並水平居中，請使用d-flex justify-content-center ，使其垂直居中，請使用align-items-center 。 使用text-truncate防止溢出，並在文本末尾添加“ ...”。 使用text-uppercase將文本轉換為大寫。 希望對您有所幫助！

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-12 d-flex"> <button type="button" class="btn btn-primary col-4 d-flex justify-content-center align-items-center" data-toggle="button"> <div class="col-8 text-uppercase">Online Pick Up</div> <div class="col-4"><img class="img-fluid" src="https://picsum.photos/50" alt=""></div> </button> <button type="button" class="btn btn-primary col-4 d-flex justify-content-center align-items-center" data-toggle="button"> <div class="col-8 text-uppercase">Online Take Out</div> <div class="col-4"><img class="img-fluid" src="https://picsum.photos/50" alt=""></div> </button> <button type="button" class="btn btn-primary col-4 d-flex justify-content-center align-items-center" data-toggle="button"> <div class="col-8 text-truncate text-uppercase">Online Something Text Pick Up</div> <div class="col-4"><img class="img-fluid" src="https://picsum.photos/50" alt=""></div> </button> </div>