Question

我正在使用Bootstrap 4处理项目。我有一行包含三列。我的代码如下所示：

<div class="row">
  <div class="col-md-4 center-block">
    <div>
      <i class="glyphicon glyphicon-time center-text"></i><br />
      <h3>On Time</h3>
      <h4>Just for you</h4>                      
    </div>
  </div>

  <div class="col-md-4 center-block">
    <i class="glyphicon glyphicon-star center-text"></i><br />
    <h3>Excellent Service</h3>
    <h4>When you need it</h4>
  </div>

  <div class="col-md-4 center-block">
    <i class="glyphicon glyphicon-heart center-text"></i><br />
    <h3>We want to be your favorite</h3>
    <h4>Why not?</h4>
  </div>
</div>

我需要将内容集中在每列中。但是，所有内容都是左对齐的，我不知道为什么。如代码所示，我使用的是center-block和center-text类。然而，他们似乎没有工作。我做错了什么？

Answer 1

您需要使用center-block代替center-text。

没有默认的Bootstrap类，例如<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-4 text-center"> <div> <i class="glyphicon glyphicon-time"></i><br /> <h3>On Time</h3> <h4>Just for you</h4> </div> </div> <div class="col-md-4 text-center"> <i class="glyphicon glyphicon-star"></i><br /> <h3>Excellent Service</h3> <h4>When you need it</h4> </div> <div class="col-md-4 text-center"> <i class="glyphicon glyphicon-heart"></i><br /> <h3>We want to be your favorite</h3> <h4>Why not?</h4> </div> </div>，并且该类需要用于父容器，而不是与任何子元素一起使用。

Array (
 [0] => Array (
             [address] => 123
             [address1] => asddff
             [address3] =>
           )
[1] => Array (
             [address] => 123
             [address1] =>
             [address3] => 
           )
[2] => Array (
             [address] => 123
             [address1] => asddff
             [address3] => 
           )
[3] => Array (
             [address] => 123
             [address1] => asddff
             [address3] => 
          )
)

Bootstrap中的中心列内容

1 个答案: