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

我有一个三角形宽的Bootstrap网格，如下所示。Bootstrap网格不是以平板设备为中心 - 响应式设计

我有塌陷到手机上的一列布局。

我希望它维持宽幅三广场在平板电脑上，而是，它似乎是这样的，它似乎要推到左边，而不是居中。

我的代码如下。我究竟做错了什么？我试过包括col-sm的代码，但它似乎没有工作。

.worksquare { 
 
    background-color: black; 
 
    height: 200px; 
 
    border: 1px solid #C0C0C0; 
 
} 
 

 
.work-description { 
 
    color: #303030; 
 
    padding: 10px 8px; 
 
}

<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>

来源

2017-06-20 noblerare

任何理由，你为什么有

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

每行的开始和结束

？

如果你只是为了间距的目的而使用它，那么你没有正确使用Bootstrap。按照他们的文档，你应该使用山坳 - * - 抵消类如下所述：

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

Eitherway，你的HTML被推倒在左边的主要原因是因为你使用的山坳-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>

将出现在平板电脑上完全没有问题。

来源

2017-06-20 02:17:13

删除那些你已经设置了一些类为“0”的空白div。他们不工作，并不是必需的。

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

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

在这里，您将在“md”断点处向上偏移这个div三个网格大小。您只需要对该行中的第一个项目执行此操作即可获得您所追求的结果。

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

来源

2017-06-20 02:19:25 partypete25

这对我有效。谢谢！ – noblerare

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

回答

相关问题