twitter-bootstrap - CSSだけでガターをブートストラップに追加する

Question

元のデザイン (InDesign/Photoshop) に可能な限り一致する 3 列のレイアウトを作成する必要があり、要件は Bootstrap のレスポンシブ/流動バージョンを使用しています。

私はそれらを中央に揃えることができない (例 1-私が達成しようとしているものに最も近い)、巨大なギャップなしで画像とテキストのサイズ変更を停止することはできません (例 2)、またはできます。パーセンテージベースのサイズを台無しにすることなく垂直方向のルールを実行する方法を理解してください (例 3)。ガターは十分な幅がなく、LESS を知らず、Bootstrap を直接変更する方法も知らないため、私は困っています。

3 つの列の間にはより多くのスペースが必要であり、サイズを大きくするにはページの中央に配置する必要があり、それらの間に垂直方向の罫線を挿入する必要があります。画像は同じサイズである必要があり、テキストはまったく同じである必要があります。

これは、私がこれを行おうとした 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 —&lt;/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;}