对齐引导容器内的div列
我正在一个网页上工作,我必须展示一些产品。我目前有3个主要产品将打开其他专业产品页面。我目前的问题是与div对齐。我使用引导列来创建等距列。但不知何故,第一个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/
如果你只是想有等距的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
。基于你的问题,我认为这是你正在寻找的东西,如果我理解正确。如果在评论中不让我知道,我会相应地调整它。
谢谢。将更新我的代码并清理额外的类。 – kromastorm
你可以创建一个最小的工作片段来演示这个问题吗? – ZimSystem
好的。将尝试在jsfiddle上重新创建它。 – kromastorm
示例代码添加,具有足够的区域宽度,它显示相同的行为。 – kromastorm