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網格不是以平板設備爲中心 - 響應式設計

回答

相關問題