Twitter bootstrap 在引导容器内对齐div列

我在一个网页上工作，在那里我必须展示一些产品。我目前有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>

身体{
颜色：白色；
}
.topnav>a：悬停{
背景色：黑色；
颜色：白色；
}
.内容{
高度：400px；
溢出y：自动；
}
div{
填充：10px；
}
.productbox{
盒影：0 8px 6px-6px#999//
边框：2倍纯色灰色；
背景图像：url（'http://placehold.it/460x250/ffffff&text=HTML5');
高度：25vh；
宽度：20vw；
边框：1px纯黑；
对齐：居中；
}
.产品名称{
字体大小：粗体；
填充物：5px；
颜色：黑色；
文本对齐：居中；
}

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

产品11
产品21
产品31

我已将页面更新到此链接：

如何使列正确对齐，同时保持内容在移动设备中查看的灵活性

---

更新：添加JSFIDLE sample以重新创建对齐问题：

如果您只是尝试使用等距div，则应将产品框放在列中。每个列都有填充，因此不需要对引导结构做任何特殊的操作。您也有很多不好的实践，您可以删除很多标记来实现这一点。首先

row-sm-12 row-md-12 row-lg-12

在bootstrap中不是一个东西，我没有看到任何自定义css，因此没有理由使用它，因为它没有做任何事情。如果您想要蓝色背景，您只需要类

内容

，或者您可以将该类添加到列周围的行中。此外，在说明列类时，最好从大到小。比如说

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

下面是这个例子的一部分

---

在本例中，我使用了

col-xs-3

，只是因为它更容易在小提琴中查看。但您可以将其更改为

col-sm-3

。基于你的问题，如果我理解正确，我认为这就是你想要的。如果您不在评论中告诉我，我会相应地调整。

如果您只是尝试使用等距div，那么您应该将产品框放在列中。每个列都有填充，因此不需要对引导结构做任何特殊的操作。您也有很多不好的实践，您可以删除很多标记来实现这一点。首先

row-sm-12 row-md-12 row-lg-12

在bootstrap中不是一个东西，我没有看到任何自定义css，因此没有理由使用它，因为它没有做任何事情。如果您想要蓝色背景，您只需要类

内容

，或者您可以将该类添加到列周围的行中。此外，在说明列类时，最好从大到小。比如说

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

下面是这个例子的一部分

---

在本例中，我使用了

col-xs-3

，只是因为它更容易在小提琴中查看。但您可以将其更改为

col-sm-3

。基于你的问题，如果我理解正确，我认为这就是你想要的。如果没有，请在评论中告诉我，我会相应地进行调整。

您能否创建一个最小的工作片段来演示该问题？好的。将尝试在jsfiddle上重新创建它。添加的示例代码具有足够的区域宽度，它显示相同的行为。好的，因此您使用自定义类（如

productbox

）覆盖所有引导CSS，因此它完全弄乱了引导网格。首先，您应该将

productbox

放入

col-*

中，而不是更改

col-*

。对不起，我没有得到最后一部分。我是否应该添加col-*并将产品框放在child div中？您能否创建一个最小的工作片段来演示这个问题？好的。将尝试在jsfiddle上重新创建它。添加的示例代码具有足够的区域宽度，它显示相同的行为。好的，因此您使用自定义类（如

productbox

）覆盖所有引导CSS，因此它完全弄乱了引导网格。首先，您应该将

productbox

放入

col-*

中，而不是更改

col-*

。对不起，我没有得到最后一部分。我应该添加col-*并将产品盒放入儿童版吗？谢谢。将更新我的代码并清理额外的类。谢谢。将更新我的代码并清理额外的类。