Bootstrap Сетка Отзывчивого Разрыв строка

Я сейчас работаю с системой самозагрузки сетки и получил следующую задачу:Bootstrap Сетка Отзывчивого Разрыв строка

я получил компоненты, которые суммируются в 4-х колонке, когда> планшета. и в 2 колонках, когда < таблетка. Некоторые из компонентов имеют ссылки и некоторые из них.

 <div class="col-xs-6 col-md-3"> 
      <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p> 
      <div class="iconname">Test1</div> 
      <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div> 
      <div class="align-left"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div> 
     </div>

http://jsfiddle.net/0q346dde/

Это прекрасно работает, но между 440px и 485px шириной, связь с:> ABCDE TEST1 PRODUCTS получает ряд перерыв, так как там нет места больше. Это происходит до тех пор, пока вторая ссылка (которая имеет меньше символов) с> ABCDE TES PRODUCTS получает перерыв.

Теперь я попытался установить «white-space: nowrap;» по ссылкам, но тогда он не будет выглядеть хорошо < 400px, так как они перекрывают друг друга.

Кто-нибудь может мне помочь?

источник

2015-01-29 Fl0R1D3R

@ Kyuu у наклоняю U просто сделать 'Col-см-12' после 485px ширина – vas

В вашем случае, если вы видите высоту DIV выше значок test3 увеличивается как экран размер уменьшается, поэтому вам необходимо зафиксировать высоту этого div в соответствии с вашими требованиями. Например.

Css:

.test { 
    height: 40px; 
}

HTML:

<div class "row"> 
    <div class="col-xs-6 col-md-3"> 
     <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p> 
     <div class="iconname">Test1</div> 
     <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div> 
     <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div> 
    </div> 
    <div class="col-xs-6 col-md-3"> 
     <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p> 
     <div class="iconname">Test2</div> 
     <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div> 
     <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div> 
    </div> 
    <div class="col-xs-6 col-md-3"> 
     <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p> 
     <div class="iconname">Test3</div> 
     <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div> 
     <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div> 
    </div> 
    <div class="col-xs-6 col-md-3"> 
     <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p> 
     <div class="iconname">Test4</div> 
     <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div> 
     <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div> 
    </div> 
</div>

источник

2015-01-29 22:18:23

привет, здесь, у меня такая же проблема, как и ответы на caeleas: на рабочих столах мне нужно иметь 4 столбца бок о бок – Fl0R1D3R

, пожалуйста, проверьте, что я изменил свой ответ в соответствии с вашими требованиями. –

проверить эту ссылку http://jsfiddle.net/h1rtbagp/ –

Для каждой линии необходимо использовать контейнер div с классом row. Таким образом вы убедитесь, что поплавки очищаются.

Таким образом, вы будете иметь:

<div class="row"> 
    <div class="col-xs-6 col-md-3"></div> 
    <div class="col-xs-6 col-md-3"></div> 
</div>

Here's an updated fiddle

источник

2015-01-29 15:47:52 Caelea

Hi Caelea, спасибо за ваш ответ , но это не то, что я хотел: мне нужно, чтобы они были на одной строке, когда на ПК, поэтому я сделал col-md-3 на столбцах, чтобы они соответствовали ширине> 768 пикселей. – Fl0R1D3R

Иногда я изменить блоки сетки с плавающего на встроенный блок для предотвращения такого поведения, только помните, чтобы очистить все withespace между столбцами или он сломает ваш макет (http://css-tricks.com/fighting-the-space-between-inline-block-elements/).

.row.inline-block > *{display: inline-block; float: none; vertical-align: top;}

Тогда вы можете просто добавить .inline-блок класса в строку

Вот скрипка: http://jsfiddle.net/0q346dde/2/

источник

2015-01-29 15:52:40 Dax

Bootstrap Сетка Отзывчивого Разрыв строка

ответ

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