Bootstrap 4 列布局不正确

Question

我有一个 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>

屏幕看起来像这样（table 应该占据 9 列屏幕宽度的 3/4 但它没有）：

我想要达到的效果是将 table 和图像在 col-3

中垂直和水平居中

Answer 1

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

用3个col-sm-4消耗1/3的col-sm-9
不要在图片上使用 col-sm-12 class
在容器上使用 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>

Answer 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>

Bootstrap 4 列布局不正确

Bootstrap 4 columns not laying out correctly

html

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4