對齊引導容器內的div列

Question

我正在一個網頁上工作，我必須展示一些產品。我目前有3個主要產品將打開其他專業產品頁面。我目前的問題是與div對齊。我使用引導列來創建等距列。但不知何故，第一個div附加在內容區域的左側。

這裏是主css：

<style> 
body { 
    color: white; 
} 

.topnav>a:hover { 
    background-color: black; 
    color: white; 
} 

.content { 
    height: 400px; 
    overflow-y: auto; 
} 

div { 
    padding: 10px; 
} 

.productbox { 
    box-shadow: 0 8px 6px -6px #999; // 
    border: 2px solid gray; 
    background-image: url('http://placehold.it/460x250/ffffff&text=HTML5'); 
    height: 25vh; 
    width: 20vw; 
    border: 1px solid black; 
    align:center; 
} 

.producttitle { 
    font-weight: bold; 
    padding: 5px; 
    color: black; 
    text-align: center; 
} 
</style> 

容器HTML：

<div class="container"> 
     <div class="row"> 
      <div class="row-sm-12 row-md-12 row-lg-12 content" 
       style="background-color: lightblue;"></div> 
     </div> 
    </div> 

這是加載被點擊的產品標籤，當頁面：

<div class="row"> 

    <div class="col-sm-3 col-md-3 col-lg-3 productbox" 
     style="background-color: lightgray;"> 
     <div class="producttitle">Product 11</div> 
    </div> 
    <div class="col-sm-3 col-md-3 col-lg-3 productbox col-sm-offset-1 col-md-offset-1 col-lg-offset-1 " 
     style="background-color: yellow;"> 
     <div class="producttitle">Product 21</div> 
     </div> 
    <div class="col-sm-3 col-md-3 col-lg-3 productbox col-sm-offset-1 col-md-offset-1 col-lg-offset-1" 
     style="background-color: red;"><div class="producttitle">Product 31</div></div> 
</div> 

我有將頁面更新到此鏈接：http://sampledreamstore.000webhostapp.com/。

我應該如何正確對齊列，同時保持內容在移動設備中的靈活性。

更新：添加的jsfiddle樣本重新對準問題：https://jsfiddle.net/gp1uux1q/

Answer 1

如果你只是想有等距的div，那麼你應該把你的產品包裝盒列內。每列都有填充，所以不需要對bootstrap結構做任何特殊的處理。你也有不少不良做法正在進行，你可以刪除很多你必須達到的標記。首先，row-sm-12 row-md-12 row-lg-12不是引導程序中的東西，我沒有看到任何自定義CSS，所以沒有理由擁有它，因爲它沒有做任何事情。如果你想要一個藍色背景，你只需要有content這個類，或者你可以將這個類添加到你的列周圍的行。在說明你的列類時，最好的做法是從大到小。例如。

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-8"> 

下，如果你只是將不得不列寬是在你只需要在最小屏幕尺寸一旦狀態，它所有屏幕尺寸相同。所以如果你想要col-lg-3 col-md-3 col-sm-3它只需要陳述爲col-sm-3。以上任何尺寸都將被照顧。

此外，如果你正在尋找甚至列沒有理由使用偏移量，除非你出於某種原因想要額外的空間，我從你的問題假設你沒有額外的空間。

您也有嵌套的行在標記中不需要，這就是爲什麼你在內容區域中獲得水平滾動條。

接下來，您正在使用col-sm-3，如果您嘗試連續使用3個盒子，則會使用col-sm-4這就是您左側的盒子似乎卡在容器側面的原因。事實上，從那裏只剩下額外的空間，沒有另一列在那裏填寫右側的行。

之所以這麼說，我覺得你想找的是像一個標記如下：

<div Class="container"> 
    <div class="row content"> 
    <div class="col-xs-4"> 
     <div class="product-box"> 
     A Product Here 
     </div> 
    </div> 
    <div class="col-xs-4"> 
     <div class="product-box"> 
     A Product Here 
     </div> 
    </div> 
    <div class="col-xs-4"> 
     <div class="product-box"> 
     A Product Here 
     </div> 
    </div> 
    </div> 
</div> 

下面是這個例子的小提琴Fiddle Demo

在這個例子中，我使用col-xs-3只是因爲它更容易在小提琴中觀看。但是您可以將其更改爲col-sm-3。基於你的問題，我認爲這是你正在尋找的東西，如果我理解正確。如果在評論中不讓我知道，我會相應地調整它。