Мне нужно как можно больше сделать 3-колоночный макет, который соответствует оригинальному дизайну (в InDesign/Photoshop), и эти требования используют гибкую версию Bootstrap.Добавление желоба в бутстрап только с CSS
Я либо не могу получить их центрированный центр (пример 1 - самый близкий к тому, чего я пытаюсь достичь), не может заставить их перестать изменять размер изображения и текста без огромного пробела (пример 2), или я не могу понять, как выполнять вертикальные правила, не испортив размеры на основе процентов (пример 3). Водосточные желоба дают мне беды, потому что они недостаточно широки, и я не знаю МЕНЬШЕ и не знаю, как напрямую модифицировать Bootstrap.
Для трех столбцов требуется больше места между ними, они должны быть центрированы на странице для больших размеров, и им необходимо установить вертикальное правило между ними. Изображения должны быть одного размера, и текст должен течь точно так же.
Вот часть моего кода, касающаяся трех разных способов, которыми я пытался это сделать.
<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>— 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>
<!-- Column 2 -->
<div class="span4">
<div class="threecolumn2ndcolumnA">
<img class="imagepadding" src="images/image2.jpg" alt="centers" /><h2>— centers —</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>— giving —</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>— 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>
<!-- Column 2 -->
<div class="span4">
<div class="threecolumn2ndcolumnB">
<img class="imagepadding" src="images/image2.jpg" alt="centers" /><h2>— centers —</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>— giving —</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>— centers —</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>— giving —</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;}
Не могли бы вы предоставить нам JsFiddle (http://jsfiddle.net/) и меньший пример вашего кода? – Pigueiras
Вы можете использовать Настройщик Bootstrap (http://twitter.github.com/bootstrap/customize.html), чтобы настроить сетку, если это необходимо. –
Вы ищете что-то вроде этого? http://jsfiddle.net/brettdewoody/RRwRv/ –