Question

我正在制作一个网页，我必须展示一些产品。我目前有3个主要产品，将打开其他专业产品页面。我目前的问题是div对齐。我正在使用bootstrap列创建等间距列。但不知何故，第一个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，那么您应该将产品盒放在列中。每列都有填充，因此不需要对引导结构做任何特别的事情。你也有不少不好的做法，你可以删除很多你必须实现的标记。首先关闭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。基于您的问题，我认为如果我理解正确的话，这就是您所寻找的。如果不在评论中告诉我，我会相应调整。

在引导程序容器内对齐div列

1 个答案: