时间戳

首页 > 解决方案 > Boostrap 行：让行内的列居中？

html - Boostrap 行：让行内的列居中？

问题描述

我有以下html：

<div class="container cases-container">
    <div class="row">
      <div class="col-xs-12 col-sm-4">
        <a href="#" class="case box-link" data-filter="logistics">
          <div class="item1">Something</div>
        </a>
      </div>
      <div class="col-xs-12 col-sm-4">
        <a href="#" class="case box-link" data-filter="construction">
          <div class="item2">Something else</div>
        </a>
      </div>
    </div>
</div>

我希望我的行中的列居中，这样即使我只有 1 列，它也会位于行的中心，而不是与左侧对齐。

这可能在引导程序中吗？（使用引导 v3.3.7）

我尝试center-block在我的行中添加类，但这没有效果。

注意：行中的列数是动态生成的。

标签： htmlcsstwitter-bootstrap

解决方案

您可以通过添加col-md-offset-*到您的第一个 col div 来执行此操作。*根据您的列使用

html {
  background: #ccc;
}
	
[class*='col-'] {
  background: #fff;
}
.col-sm-4{
border:1px solid gray
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 col-md-offset-2">
      Column A
    </div>

    <div class="col-sm-4">
      Column B
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4 col-md-offset-4">
      1 Column Centered
    </div>

  </div>
</div>

推荐阅读