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>

屏幕看起来像这样（表格应占据屏幕宽度的3列3/4，但不是这样）：

我想要达到的效果是将表格和图像在纵向和横向都集中在col-3中

Answer 1

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

使用3 col-sm-4消耗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>

Answer 2

您的实施存在一些问题：

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

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Bootstrap 4列未正确布局

2 个答案: