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“网格”的定义是必须具有类row，直系后代具有col-*类型的类。用简单的话来说，列必须包裹在行中。如果您不尊重这一点，那么您就不应指望它能按设计执行。

如果要进一步划分.col-*元素，则需要在其中放置一个.row元素，并将其他较小的.col-*放置在该.row中。

此外，您的大{layout} .row应该是.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（内联元素），因此跨度的边距，溢出和某些其他功能将无法像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>

引导网格在元素内部不起作用

2 个答案: