Question

我有以下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列，它也将位于行的中心而不是向左对齐。

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

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

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

Answer 1

您可以按照以下步骤进行操作，方法是将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>

Answer 2

我遇到了同样的问题，并使用独立的CSS解决了 HTML

<div class="row center">

CSS

.center {
    text-align: center;
}

Answer 3

您可以使用自定义CSS来实现。这将适用于动态列数。

用center-block添加row类
将text-align: center;授予center-block
使用float: left;对col类覆盖float: none;
为display: inline-block;类设置col，以使它们对齐center
对于小型设备，对于@media类，请使用display: inline-block;并将display: block覆盖为col
在整页中检查code snippet以查看其运行情况

.center-block {
    text-align: center;
}

.center-block [class*="col-"] {
    display: inline-block;
    float: none;
}

/* For small devices */
@media screen and (max-width: 767px) {
  .center-block [class*="col-"] {
    display: block;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

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

Answer 4

@PartisanEntity，您可以在此处应用一些逻辑。我认为您有总数的列，并且您已经知道列的大小。然后您可以动态设置偏移量。

假设

total_number_of_columns = 2;

size_of_columns = 4;

然后计算偏移量并向下取整

result_offset_temp = 12 - (total_number_of_columns * size_of_columns );
result_offset = round(result_offset_temp / 2);

只需将此值作为偏移量

例如：

<div class="row">
  <!-- loop start -->
  <div class="col-xs-12 col-sm-4 col-sm-offset-{ result_offset }">
    <a href="#" class="case box-link" data-filter="logistics">
      <div class="item1">Something</div>
    </a>
  </div>
  <!-- loop end -->
</div>

Boostrap行：让行中的cols居中吗？

4 个答案: