Добавление желоба в бутстрап только с CSS

Мне нужно как можно больше сделать 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>&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;}

источник

2013-03-11 Brandon

Не могли бы вы предоставить нам JsFiddle (http://jsfiddle.net/) и меньший пример вашего кода? – Pigueiras

Вы можете использовать Настройщик Bootstrap (http://twitter.github.com/bootstrap/customize.html), чтобы настроить сетку, если это необходимо. –

Вы ищете что-то вроде этого? http://jsfiddle.net/brettdewoody/RRwRv/ –

Я не смог получить войти снова с учетной записью, что я отправил эту тему/вопрос с. Несколько недель назад я опробовал идею Бретта, но не смог прокомментировать. Спасибо, ребята, за то, что помогли мне с некоторыми советами. Я в значительной степени нашел равноотстоящие разделители, с полностью центрированным контентом в каждом столбце/столбце, в принципе невозможным в 12-ти столбцовом макете, по крайней мере, с желобами по умолчанию. Решение Бретта было самым умным из всех моих попыток, но все же привело к группе из трех столбцов, которые больше не были полностью сосредоточены на странице. Возможно, возможно, что с помощью специальной бутстрапа с удалением желобов, что-то может быть создано, но я никогда не пробовал это. Это также может быть возможно, если сайт начальной загрузки не реагирует, но этот сайт должен быть отзывчивым, так что это не вариант.

В конце концов, я просто решил, что эти вертикальные разделители просто должны быть остановлены.

источник

2013-04-20 17:31:02 user2288275

Добавление желоба в бутстрап только с CSS

ответ

Смежные вопросы