2016-09-13 3 views
0
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12" style="background-color:red;"> 
       dfsasfssssssssssssssssssssssssssssssssssssssssssssss 
      </div> 
     </div> 
    </div> 
    </body> 

PLUNK to editBootstrap Колонка не расширяется вертикально

Это, вероятно, что-то очень очевидно, но я думал, что бутстраповские колонны расширяется по вертикали с содержанием. Мой нет.

Вопрос с бонусом: всегда ли поведение по умолчанию для бутстрапа было отступом «контейнера» - как этого избежать?

+1

CSS: Попробуйте использовать бело-пространство: нормальный; – Nimmi

+1

Бонусный ответ: Да, это поведение по умолчанию для начальной загрузки. Он добавляет 15px дополнение к левой и правой сторонам. Чтобы избежать этого, вы можете переопределить CSS в своей собственной таблице стилей, используя '.container {padding-left: 0; padding-right: 0;} ' – asprin

ответ

3

Это обычное поведение, потому что col-*-* установлено float:left, поэтому вам нужно использовать word-wrap:break-word, потому что в тексте нет пробелов.

Чтобы избежать отступа вы упомянули (по умолчанию padding, что самонастройки добавить в .container), вы можете сбросить набор .container {padding:0}

.col-xs-12 { 
 
    background:red; /* demo */ 
 
    word-wrap: break-word 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     dfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssss 
 
    </div> 
 
    </div> 
 
</div>

+0

Это решает мою проблему - я передумал, потому что я даже не рассматривал вопрос о расстоянии. Вернется, чтобы принять ответ, когда истечет время таймера. – VSO

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