问仅使用CSS将间隔添加到引导
EN

Stack Overflow用户

提问于 2013-03-11 19:01:37

回答 1查看 643关注 0票数 0

我需要做一个与原始设计(在InDesign/Photoshop中)尽可能匹配的3列布局，并且要求使用响应式/流体版本的Bootstrap。

我要么无法使它们居中对齐(示例1--最接近于我试图实现的目标)，要么无法让它们停止在没有巨大间隙的情况下调整图像和文本的大小(示例2)，要么我想不出如何在不弄乱基于百分比的大小的情况下执行垂直规则(示例3)。这些间隔给我带来了麻烦，因为它们不够宽，我不知道更少，也不知道如何直接修改Bootstrap。

这3列之间需要更多的空间，它们需要在页面上居中以获得更大的尺寸，并且它们需要在它们之间插入垂直标尺。图像需要相同的大小和文本应该完全相同的流动。

以下是我的代码中关于我尝试过的三种不同方法的部分。

<div class="container">
<div class="row-fluid">
<!-- Column 1 -->        
<div class="span4">
      <div class="threecolumn1stcolumnA">
      <img class="imagepadding" src="images/image1.jpg" alt="institutes" />
      <h2>&mdash; institutes &mdash;</h2>
      <p>Rae con core maximil earum solo cum namusa suntiatur, optate pos eum id quo mod ea simusciunt, nisqui anducita volore si sinust rae est et in restrum quaeped mo ma veliquo diciur, undam aut et et as sequaspis essitis alis unt, si dolut etur? Quid ma naturem perior ame sumet auta ni conessi te plis que nusda volorei uritas ad es dolorepero volorer spelecea none et repudit eliquunt optatem nobis andis del</p>
            </div>
    </div>
<!-- Column 2 -->        

    <div class="span4">
      <div class="threecolumn2ndcolumnA">
      <img class="imagepadding" src="images/image2.jpg" alt="centers" /><h2>&mdash; centers &mdash;</h2>
      <p>Rae con core maximil earum solo cum namusa suntiatur, optate pos eum id quo mod ea simusciunt, nisqui anducita volore si sinust rae est et in restrum quaeped mo ma veliquo diciur, undam aut et et as sequaspis essitis alis unt, si dolut etur? Quid ma naturem perior ame sumet auta ni conessi te plis que nusda volorei uritas ad es dolorepero volorer spelecea none et repudit eliquunt optatem nobis andis del </p>
    </div>
    </div>
<!-- Column 3 -->        

    <div class="span4">
      <div class="threecolumn3rdcolumnA">
      <img class="imagepadding" src="images/image3.jpg" alt="giving" /><h2>&mdash; giving &mdash;</h2>
      <p>Rae con core maximil earum solo cum namusa suntiatur, optate pos eum id quo mod ea simusciunt, nisqui anducita volore si sinust rae est et in restrum quaeped mo ma veliquo diciur, undam aut et et as sequaspis essitis alis unt, si dolut etur? Quid ma naturem perior ame sumet auta ni conessi te plis que nusda volorei uritas ad es dolorepero volorer spelecea none et repudit eliquunt optatem nobis andis del</p>         
    </div>
    </div>
  </div>           

<div class="row-fluid">
<!-- Column 1 -->        
<div class="span4">
      <div class="threecolumn1stcolumnB">
      <img class="imagepadding" src="images/image1.jpg" alt="institutes" />
      <h2>&mdash; institutes &mdash;</h2>
      <p>Rae con core maximil earum solo cum namusa suntiatur, optate pos eum id quo mod ea simusciunt, nisqui anducita volore si sinust rae est et in restrum quaeped mo ma veliquo diciur, undam aut et et as sequaspis essitis alis unt, si dolut etur? Quid ma naturem perior ame sumet auta ni conessi te plis que nusda volorei uritas ad es dolorepero volorer spelecea none et repudit eliquunt optatem nobis andis del</p>
            </div>
    </div>
<!-- Column 2 -->        

    <div class="span4">
      <div class="threecolumn2ndcolumnB">
      <img class="imagepadding" src="images/image2.jpg" alt="centers" /><h2>&mdash; centers &mdash;</h2>
      <p>Rae con core maximil earum solo cum namusa suntiatur, optate pos eum id quo mod ea simusciunt, nisqui anducita volore si sinust rae est et in restrum quaeped mo ma veliquo diciur, undam aut et et as sequaspis essitis alis unt, si dolut etur? Quid ma naturem perior ame sumet auta ni conessi te plis que nusda volorei uritas ad es dolorepero volorer spelecea none et repudit eliquunt optatem nobis andis del </p>
    </div>
    </div>
<!-- Column 3 -->        

    <div class="span4">
      <div class="threecolumn3rdcolumnB">
      <img class="imagepadding" src="images/image3.jpg" alt="giving" /><h2>&mdash; giving &mdash;</h2>
      <p>Rae con core maximil earum solo cum namusa suntiatur, optate pos eum id quo mod ea simusciunt, nisqui anducita volore si sinust rae est et in restrum quaeped mo ma veliquo diciur, undam aut et et as sequaspis essitis alis unt, si dolut etur? Quid ma naturem perior ame sumet auta ni conessi te plis que nusda volorei uritas ad es dolorepero volorer spelecea none et repudit eliquunt optatem nobis andis del</p>         
    </div>
    </div>
  </div>   
<div class="row-fluid">
<!-- Column 1 -->
<div class="span12">
<div class="threecolumn1stbox">
<img class="imagepadding" src="images/image1.jpg" alt="institutes" />
<h2>— institutes —</h2><p>Rae con core maximil earum solo cum namusa suntiatur, optate pos eum id quo mod ea simusciunt, nisqui anducita volore si sinust rae est et in restrum quaeped mo ma veliquo diciur, undam aut et et as sequaspis essitis alis unt, si dolut etur? Quid ma naturem perior ame sumet auta ni conessi te plis que nusda volorei uritas ad es dolorepero volorer spelecea none et repudit eliquunt optatem nobis andis del</p></div>
<div class="threecolumn2ndbox">
<img class="imagepadding" src="images/image2.jpg" alt="centers" />
<h2>&mdash; centers &mdash;</h2><p>Rae con core maximil earum solo cum namusa suntiatur, optate pos eum id quo mod ea simusciunt, nisqui anducita volore si sinust rae est et in restrum quaeped mo ma veliquo diciur, undam aut et et as sequaspis essitis alis unt, si dolut etur? Quid ma naturem perior ame sumet auta ni conessi te plis que nusda volorei uritas ad es dolorepero volorer spelecea none et repudit eliquunt optatem nobis andis del </p></div>
<div class="threecolumn3rdbox">
<img class="imagepadding" src="images/image3.jpg" alt="giving" />
<h2>&mdash; giving &mdash;</h2><p>Rae con core maximil earum solo cum namusa suntiatur, optate pos eum id quo mod ea simusciunt, nisqui anducita volore si sinust rae est et in restrum quaeped mo ma veliquo diciur, undam aut et et as sequaspis essitis alis unt, si dolut etur? Quid ma naturem perior ame sumet auta ni conessi te plis que nusda volorei uritas ad es dolorepero volorer spelecea none et repudit eliquunt optatem nobis andis del</p></div>
</div>
</div>

这是CSS

.threecolumn1stcolumnA{
padding: 0 20px 0 45px;
margin-top:30px;
margin-left:1px;}
.threecolumn2ndcolumnA{
padding: 0 20px 0 45px;
margin-top:30px;
border-left:1px solid #d7d7d7;}
.threecolumn3rdcolumnA{
padding: 0 45px 0 45px;
margin-top:30px;
border-left:1px solid #d7d7d7;}

.threecolumn1stcolumnB {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
padding: 0 45px 0 45px;
margin-top:30px;
border-right:1px solid #d7d7d7;}
.threecolumn2ndcolumnB{box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
padding: 0 45px 0 45px;
margin-top:30px;}
.threecolumn3rdcolumnB{
    box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
padding: 0 45px 0 45px;
margin-top:30px;
border-left:1px solid #d7d7d7;}

.threecolumn1stbox{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:33.333333%;
float:left;
padding: 0 45px 0 45px;
margin-left:1px;}
.threecolumn2ndbox{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:33.333333%;
float:left;
padding: 0 45px 0 45px;
border-left:1px solid #d7d7d7;}
.threecolumn3rdbox{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:33%;
float:left;
padding: 0 45px 0 45px;
border-left:1px solid #d7d7d7;}

fluid-layout

fluid

gutter

twitter-bootstrap

responsive-design

有奖征集｜云上CPU玩转AIGC挑战赛

参加活动赢取洛斐键盘、小米电纸书、智能音响等鹅厂周边！

回答 1

Stack Overflow用户

发布于 2013-04-20 17:31:03

我无法使用发布此主题/问题的帐户再次登录。几周前，我尝试了Brett的想法，但无法对此发表评论。谢谢你们帮了我的忙，给我一些建议。我几乎发现等间距的分隔符，在每个跨度/列中完全居中的内容在12列响应式布局中基本上是不可能的，至少在默认间隔中是不可能的。在我尝试的所有解决方案中，Brett的解决方案是最聪明/最聪明的，但仍然导致一组三列不再完全集中在页面上。也许可以通过删除间隔的自定义引导程序来创建一些东西，但我从未尝试过这样做。如果bootstrap站点没有响应也是可能的，但是这个站点必须响应，所以这不是一个选项。

最后，我决定把那些垂直分隔符去掉。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15346445

复制

重启电脑继续运行MATLAB程序

编程算法 matlab

因为实验室断电问题，或者其他原因，程序运行会被打断。这里提供一个matlab可以在中断后，重启，利用之前已有的结果继续优化过程

万木逢春

2019/10/09

3.2K0