0

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

我要么无法让它们居中对齐（示例 1——最接近我想要实现的目标），要么无法让他们停止调整图像和文本的大小而没有巨大的差距（示例 2），或者我可以' t 弄清楚如何在不弄乱基于百分比的大小的情况下执行垂直规则（示例 3）。排水沟给我带来了麻烦，因为它们不够宽，而且我不知道 LESS 也不知道如何直接修改 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 —&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;}
4

1 回答 1

0

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

最后，我只是决定只需要保留那些垂直分隔线。

于 2013-04-20T17:31:02.883 回答