Question

我有一个三个方格宽的Bootstrap网格，如下所示。

我把它折叠成手机上的单列布局。

我希望它在平板电脑上保持三个方格宽，但相反，它看起来像是这样，它似乎被推到左边而不是居中。

我的代码如下。我究竟做错了什么？我尝试为col-sm添加代码，但它似乎无法正常工作。

＆＃13;

.worksquare {
  background-color: black;
  height: 200px;
  border: 1px solid #C0C0C0;
}

.work-description {
  color: #303030;
  padding: 10px 8px;
}

＆＃13;

<script src="https://use.fontawesome.com/8c321ca885.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>

  <div class="container-fluid">
    <!-- full container -->

    <div class="row" style="margin-top: 100px;"></div>
    <!-- some header here -->
    <!-- end of header section -->

    <div class="row">
      <div class="col-xs-0 col-sm-0 col-md-3"></div>
      <div class="col-xs-12 col-sm-3 col-md-2 bottom-buffer30">
        <a href="#" class="work-link">
          <div class="worksquare"></div>
          <div class="lato work-description"><b>Block title</b></a>:
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>

      <div class="col-xs-12 col-sm-3 col-md-2 bottom-buffer30">
        <a href="#" class="work-link">
          <div class="worksquare"></div>
          <div class="lato work-description"><b>Block title</b></a>:
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>

      <div class="col-xs-12 col-sm-3 col-md-2 bottom-buffer30">
        <a href="#" class="work-link">
          <div class="worksquare"></div>
          <div class="lato work-description"><b>Block title</b></a>:
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>

      <div class="col-xs-0 col-sm-0 col-md-3"></div>
    </div>

    <div class="row">
      <div class="col-xs-0 col-sm-0 col-md-3"></div>
      <div class="col-xs-12 col-sm-3 col-md-2 bottom-buffer30">
        <a href="#" class="work-link">
          <div class="worksquare"></div>
          <div class="lato work-description"><b>Block title</b></a>:
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>

      </div>

      <div class="col-xs-12 col-sm-3 col-md-2 bottom-buffer30">
        <a href="#" class="work-link">
          <div class="worksquare"></div>
          <div class="lato work-description"><b>Block title</b></a>:
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>

      <div class="col-xs-12 col-sm-3 col-md-2 bottom-buffer30">
        <a href="#" class="work-link">
          <div class="worksquare"></div>
          <div class="lato work-description"><b>Block title</b></a>:
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>

      <div class="col-xs-0 col-sm-0 col-md-3"></div>
    </div>

    <div class="row top-buffer40"></div>

  </div>

</body>


</html>

＆＃13;

Answer 1

你有

的原因

<div class="col-xs-0 col-sm-0 col-md-3"></div>

在每一行的开头和结尾？

如果你只是为了间距目的使用它，那么你没有正确使用Bootstrap。根据他们的文档，你应该使用col - * - offset类，如下所述：

http://getbootstrap.com/css/#grid-offsetting

无论如何，将HTML推向左侧的主要原因是因为您使用的是col-sm-3，这是平板电脑尺寸的25％。由于你有3块，它只会填满75％的视口，因为网格而被推到左边。

如果你使用col-sm-4代替33％，你将完全填满视口，即

<div class="row">
      <div class="col-xs-0 col-sm-0 col-md-3"></div>
      <div class="col-xs-12 col-sm-4 col-md-2 bottom-buffer30">
        <a href="#" class="work-link">
          <div class="worksquare"></div>
          <div class="lato work-description"><b>Block title</b></a>:
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>

      <div class="col-xs-12 col-sm-4 col-md-2 bottom-buffer30">
        <a href="#" class="work-link">
          <div class="worksquare"></div>
          <div class="lato work-description"><b>Block title</b></a>:
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>

      <div class="col-xs-12 col-sm-4 col-md-2 bottom-buffer30">
        <a href="#" class="work-link">
          <div class="worksquare"></div>
          <div class="lato work-description"><b>Block title</b></a>:
        <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>

      <div class="col-xs-0 col-sm-0 col-md-3"></div>
    </div>

在平板电脑上显得非常好。

Answer 2

删除你已经将某些类设置为“0”的那些空div。它们不起作用，也不是必需的。

然后使用偏移类更新您想要偏移的div。像这样：

<div class="col-xs-12 col-sm-3 col-md-2 col-md-offset-3 bottom-buffer30">

这里你将这个div在“md”断点处向上偏移三个网格大小。你只需要对行中的第一项做到这一点，以达到你所追求的结果。

http://getbootstrap.com/css/#grid-offsetting

Bootstrap网格不以平板设备为中心 - 响应式设计

2 个答案: