Question

我正在用Bootstrap组建一个测试站点，并认为我在某处误解了网格系统。我有以下代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-4 col-12 text-center">
      <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="cheryl-winn-boujnida-65955.jpg" alt="Card image cap">
        <h4 class="card-title">
          <i class="fa fa-circle-o-notch" aria-hidden="true"></i> Fast photo printing</h4>
        <p class="card-text">Upload content and have it sent to your address within 3 hours</p>
      </div>
    </div>
    <div class="col-lg-4 col-12 text-center">
      <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="neonbrand-371471.jpg" alt="Card image cap">
        <h4 class="card-title">
          <i class="fa fa-superpowers" aria-hidden="true"></i> Total access</h4>
        <p class="card-text">Access your media from any device, from any location</p>
      </div>
    </div>
    <div class="col-lg-4 text-center">
      <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="allef-vinicius-205147.jpg" alt="Card image cap">
        <h4 class="card-title">
          <i class="fa fa-ravelry" aria-hidden="true"></i> Freedom
        </h4>
        <p class="card-text">Choose your package to suit your needs and usage</p>
      </div>
    </div>
  </div>
</div>

在大屏幕上，div很好地水平排列，然后它们确实在第一个断点处堆叠。然而，当它们堆叠时，它们对齐到左侧，我也有这样的印象：通过添加col-12（据我所知这已经取代col-xs-12）它们也会占据屏幕的整个宽度但是这种情况也没有发生。

Answer 1

行中心儿童元素

<强> 1。添加课程

转到col-sm / md / lg-6/12的子元素并将其命名为'center-block'

但它适用于Bootstrap＆gt; 3.0.0

示例：

<div class="col-lg-12">
  <div class="child center-block">
</div>

<强> 2。保证金自动

将您想要的元素置于以下属性的中心

.className{
  float: none;
  margin: 0 auto; 
}

您的问题的解决方案如下：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="row">


    <div class="col-lg-4 col-sm-12 text-center">

      <div class="card center-block" style="width: 20rem;">


        <img class="card-img-top img-responsive" src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_960_720.jpg" alt="Card image cap">


        <h4 class="card-title">

          <i class="fa fa-circle-o-notch" aria-hidden="true"></i> Fast photo printing</h4>

        <p class="card-text">Upload content and have it sent to your address within 3 hours</p>

      </div>

    </div>

    <div class="col-lg-4 col-sm-12 text-center">

      <div class="card center-block" style="width: 20rem;">

        <img class="card-img-top img-responsive" src="https://cdn.pixabay.com/photo/2017/01/06/23/21/soap-bubble-1959327_960_720.jpg" alt="Card image cap">

        <h4 class="card-title">

          <i class="fa fa-superpowers" aria-hidden="true"></i> Total access</h4>

        <p class="card-text">Access your media from any device, from any location</p>

      </div>

    </div>

    <div class="col-lg-4 col-sm-12 text-center">

      <div class="card center-block" style="width: 20rem;">

        <img class="card-img-top img-responsive" src="https://cdn.pixabay.com/photo/2016/11/29/10/07/animal-1868911_960_720.jpg" alt="Card image cap">

        <h4 class="card-title">

          <i class="fa fa-ravelry" aria-hidden="true"></i> Freedom

        </h4>

        <p class="card-text">Choose your package to suit your needs and usage</p>

      </div>

    </div>

    </div>


</div>

在引导程序中堆叠时，Div不居中

1 个答案: