我想在我的网站上显示6个div,我希望它们之间有间隙。为了获得边距,我必须在cols上设置宽度,否则在更改站点宽度时设计会中断。我的问题是:我如何将所有cols居中?我尝试过包装纸,但没有运气。
这是我的HTML
<div class="container">
<div class="jumbotron">
<h2>Header</h2>
<div class="row" id="steps">
<ul class="list-unstyled">
<div class="col-lg-4 col-md-4 col-sm-12">
<p>1</p>
<li></li>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<p>2</p>
<li></li>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<p>3</p>
<li></li>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<p>4</p>
<li></li>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<p>5</p>
<li></li>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<p>6</p>
<li></li>
</div>
</ul>
</div>
</div>
</div>
这是我的CSS
#steps {
text-align: center;
}
#steps div {
width: 320px;
margin: 2px;
line-height: 22px;
box-shadow: 0 0 20px 1px rgba(0,0,0,.3);
height: 110px;
}
#steps li {
padding: 0 10px 0 10px;
}
#steps p {
color: #1d70b7;
margin-top: 20px;
margin-left: 10px;
text-align: left;
}
答案 0 :(得分:0)
如果要在bootstrap中使用行列表,最好使用下面的方法。
<div class="container">
<ul class="list-unstyled">
<li class="col-md-6">Content1</li>
<li class="col-md-6">Content2</li>
<li class="col-md-6">Content3</li>
<li class="col-md-6">Content4</li>
<li class="col-md-6">Content5</li>
<li class="col-md-6">Content6</li>
</ul>
</div>
答案 1 :(得分:0)
我会删除列表并采用这种方法:
<强> JSFiddle 强>
<强> HTML:强>
<div class="container">
<div class="jumbotron">
<h2>Header</h2>
<div class="row" id="steps">
<div class="wrapper">
<div class="list-unstyled">
<div class="l-u col-lg-4 col-md-4 col-sm-12">
<p>1</p>
</div>
<div class="l-u col-lg-4 col-md-4 col-sm-12">
<p>2</p>
</div>
<div class="l-u col-lg-4 col-md-4 col-sm-12">
<p>3</p>
</div>
<div class="l-u col-lg-4 col-md-4 col-sm-12">
<p>4</p>
</div>
<div class="l-u col-lg-4 col-md-4 col-sm-12">
<p>5</p>
</div>
<div class="l-u col-lg-4 col-md-4 col-sm-12">
<p>6</p>
</div>
</div>
</div>
</div>
</div>
</div>
<强> CSS:强>
#steps {
width: 100%;
text-align: center;
}
.wrapper {
width: 100%;
margin: 0 auto;
}
.list-unstyled {
display: table;
width: 80%;
margin: 0 auto;
}
.l-u {
display: inline-block;
width: 32%;
min-width: 200px;
margin: 0.5%;
line-height: 22px;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, .3);
height: 110px;
}
.l-u p {
padding: 0 10px;
color: #1d70b7;
margin-top: 20px;
margin-left: 10px;
text-align: left;
}