Bootstrap 网格 [2 项] 居中

Question

我正在使用 bootstrap 制作网站，这是来自 w3schools.com 的网格屏幕截图。在我的网站上，我的个人资料图片不是在左侧 1 of 2 上，而是在右侧的 2 of 2 上有项目符号列表。

我想在离开 1 时在 2 of 4 上显示个人资料照片，在 3 of 4 上显示项目符号列表of 4 和 4 of 4 为空。基本上只是在页面中央多了两个项目。

我怎样才能完成这个任务？

Answer 1

<div class="row">
    <div class="col-sm-3" style="visibility:hidden"></div>
    <div class="col-sm-3" style="background-color:pink;">
      picture here    
    </div>
    <div class="col-sm-3" style="background-color:pink;">
      bullets here   
    </div>
    <div class="col-sm-3" style="visibility:hidden"></div>
  </div>

Answer 2

尝试在创建网格时使用偏移量使用偏移量 class 这将帮助您将 col 居中对齐：

Documentation

<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 ">.col-md-3 .offset-md-3</div>
</div>

Answer 3

您需要 offset 您的列：offset-sm-3 指定将 4 个中的第 1 个留空

使用

<div class="container">
  <div class="row">
    <div class="col-sm-3 offset-sm-3">Picture</div>
    <div class="col-sm-3">Bullets</div>
  </div>
</div>

Bootstrap 网格 [2 项] 居中

Bootstrap Grid [2 items] in center

html

css

twitter-bootstrap

flexbox

bootstrap-grid