Bootstrap 4列布局不正确答案

【问题标题】：Bootstrap 4 columns not laying out correctlyBootstrap 4列布局不正确
【发布时间】：2017-05-17 21:09:52
【问题描述】：

我有一个 Bootstrap 4 网格，其中一列是 9 个单位，一列是 3 个单位，但 9 个单位的列没有占据应有的页面宽度的 3/4。

html 看起来像这样：

.features-image2 {
  max-width: 140px;
  min-width: 140px;
  width: 140px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="services" class="container-fluid text-center">
  <div class="row text-center">
    <div class="col-sm-9 ">
      <div class="row">
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-off logo-small"></span>
          <h4>POWER</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-heart logo-small"></span>
          <h4>LOVE</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-lock logo-small"></span>
          <h4>JOB DONE</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
      </div>
      <br><br>
      <div class="row">
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-leaf logo-small"></span>
          <h4>GREEN</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-certificate logo-small"></span>
          <h4>CERTIFIED</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-wrench logo-small"></span>
          <h4 style="color:#303030;">HARD WORK</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
      </div>
    </div>
    <div class="col-sm-3 ">
      <img class="col-sm-3 features-image2" src="http://placehold.it/140x140">
    </div>
  </div>
</div>

屏幕看起来像这样（表格应该占据屏幕宽度 3/4 的 9 列，但实际上没有）：

我想要达到的效果是在 col-3 中将表格和图像都垂直和水平居中

【问题讨论】：

而不是 col-sm-3 使用 col 只有它会自动覆盖剩余的宽度。尽管在col-sm-9 中，您应该给col-sm-4 以覆盖整个宽度。因为它使 to 列数等于 12。
还添加align-items-center到父行以设置内部内容垂直居中对齐

标签： html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

您的布局存在一些问题...

使用3个col-sm-4消耗1/3的col-sm-9
不要在图片上使用col-sm-12 类
在容器上使用 flexbox 和 min-height 垂直居中
将col-sm-9 更改为col-sm-8 offset-sm-1 以水平居中（可选）

演示 http://www.codeply.com/go/DbV50b96vz

<div id="services" class="container-fluid text-center d-flex">
  <div class="row text-center w-100 align-items-center">
    <div class="col-sm-8 offset-sm-1">
      <div class="row">
        <div class="col-sm-4">
          <span class="glyphicon glyphicon-off logo-small"></span>
          <h4>POWER</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-4">
          <span class="glyphicon glyphicon-heart logo-small"></span>
          <h4>LOVE</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-4">
          <span class="glyphicon glyphicon-lock logo-small"></span>
          <h4>JOB DONE</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
      </div>
      <br><br>
      <div class="row">
        <div class="col-sm-4">
          <span class="glyphicon glyphicon-leaf logo-small"></span>
          <h4>GREEN</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-4">
          <span class="glyphicon glyphicon-certificate logo-small"></span>
          <h4>CERTIFIED</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-4">
          <span class="glyphicon glyphicon-wrench logo-small"></span>
          <h4 style="color:#303030;">HARD WORK</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
      </div>
    </div>
    <div class="col-sm-2 text-center">
        <img class="features-image2" src="//placehold.it/500x800">
    </div>
  </div>
</div>

【讨论】：

感谢完美的 ZimSystem。

【解决方案2】：

您的实现存在一些问题：

1st：你为什么放那些
标签？他们是不必要的
第二个：我认为最好使图像成为块的背景图像，而不是把它放进去。

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css';
.features-image2 {
  /*max-width: 140px;
  min-width: 140px;
  width: 140px;*/
}

.block-left{
  height: 500px;
  background: red;
}

.block-right{
  height: 500px;
  background: blue;
  background-image: url("https://images-na.ssl-images-amazon.com/images/M/MV5BMjMxMzg3MDI5NV5BMl5BanBnXkFtZTcwOTAxODc0Ng@@._V1_UY317_CR31,0,214,317_AL_.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

<div id="services" class="container-fluid text-center">
  <div class="row text-center">
    <div class="col-sm-9 block-left">
      <div class="row">
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-off logo-small"></span>
          <h4>POWER</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-heart logo-small"></span>
          <h4>LOVE</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-lock logo-small"></span>
          <h4>JOB DONE</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
      </div>
     
      <div class="row">
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-leaf logo-small"></span>
          <h4>GREEN</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-certificate logo-small"></span>
          <h4>CERTIFIED</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
        <div class="col-sm-3">
          <span class="glyphicon glyphicon-wrench logo-small"></span>
          <h4 style="color:#303030;">HARD WORK</h4>
          <p>Lorem ipsum dolor sit amet..</p>
        </div>
      </div>
    </div>
    <div class="col-sm-3 block-right">
      
    </div>

【讨论】：