Twitter bootstrap 仅使用CSS向引导添加边沟

我需要做一个3列布局，尽可能匹配原始设计（在InDesign/Photoshop中），并且要求使用响应/流畅版本的引导

我要么无法让它们居中对齐（示例1——最接近我试图实现的目标），要么无法让它们停止调整图像和文本的大小而没有巨大的间隙（示例2），要么我无法想出如何在不弄乱基于百分比的大小的情况下执行垂直规则（示例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>

---

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

---

最后，我决定不使用这些垂直分隔符。

您能给我们提供一个JSFIDLE（）和一个较小的代码示例吗？如果需要，您可以使用引导定制器（）来定制网格。您正在寻找类似的东西吗？

.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;}