对齐引导容器内的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。基于你的问题，我认为这是你正在寻找的东西，如果我理解正确。如果在评论中不让我知道，我会相应地调整它。