我正在使用 bootstrap 3,我正在尝试将营销 div 居中并在其周围放一个框。我想将营销部分保持在中心位置。
.box 只是一个带边框的简单框。
这是我的代码:
<div class="container">
<div class="col-md-offset-2">
<div class="row box">
<div class="marketing">
<div class="col-lg-3">
<img class="img-responsive" src="http://placehold.it/100x100" alt="placeholder" class="img-rounded">
<h2>Lorem Ipsum</h2>
<p class="marketing-desc">Lorem ipsum dolor sit amet</p>
</div>
<div class="col-lg-3">
<img class="img-responsive" src="http://placehold.it/100x100" alt="placeholder" class="img-rounded">
<h2>Lorem Ipsum</h2>
<p class="marketing-desc">Lorem ipsum dolor sit amet, quidam debitis honestatis ut eam. Dicant perpetua pro an, id mei iusto ridens. Cibo salutatus has ex..</p>
</div>
<div class="col-lg-3">
<img class="img-responsive" src="http://placehold.it/100x100" alt="placeholder" class="img-rounded">
<h2>Lorem Ipsum</h2>
<p class="marketing-desc">Lorem ipsum dolor sit amet, quidam debitis honestatis ut eam.</p>
</div>
</div>
</div>
</div>
</div>
它把盒子向右延伸得太远了,我不明白为什么它不在两边。
链接 1
最佳答案
看起来您的列并没有完全加起来。相反,您可以在现有列中嵌套另一行 12 列。尝试:
<div class="container">
<div class="row">
<div class="col-lg-offset-2 col-lg-8">
<div class="row box">
<div class="marketing">
<div class="col-lg-4">
<img class="img-responsive" src="http://placehold.it/100x100" alt="placeholder" class="img-rounded">
<h2>Lorem Ipsum</h2>
<p class="marketing-desc">Lorem ipsum dolor sit amet</p>
</div>
<div class="col-lg-4">
<img class="img-responsive" src="http://placehold.it/100x100" alt="placeholder" class="img-rounded">
<h2>Lorem Ipsum</h2>
<p class="marketing-desc">Lorem ipsum dolor sit amet, quidam debitis honestatis ut eam. Dicant perpetua pro an, id mei iusto ridens. Cibo salutatus has ex..</p>
</div>
<div class="col-lg-4">
<img class="img-responsive" src="http://placehold.it/100x100" alt="placeholder" class="img-rounded">
<h2>Lorem Ipsum</h2>
<p class="marketing-desc">Lorem ipsum dolor sit amet, quidam debitis honestatis ut eam.</p>
</div>
</div>
</div>
</div>
</div>
</div>
编辑:jsfiddle (列仅设置为大,因此请确保窗口足够大)
关于html - 想要将营销 div 居中并在其周围放一个框 - 使用 Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19965915/