Об'єм завантажувальних рядків (рядок)

Я тестую Twitter Bootstrap і застряг у базових риштуваннях рядками. Я кілька разів переглянув їх документацію, і я бачу стовпчики для вкладки, де ви можете в основному вкладати стовпчики в стовпчик, але я не можу знайти можливість поєднання рядків в один і встановити його врівень із стовпцем поруч із некомбінованими рядками.

Нижче на малюнку має бути проілюстровано те, що я хочу досягти.

Єдине рішення рішення, яке я натрапив - це використання таблиць, але мені ця ідея не подобається, оскільки я вважаю, що чуйність не буде працювати при використанні таблиць.

Хтось має якесь елегантне рішення для цього? Більшість веб-макетів, які я роблю, потребуватимуть тонкого рівня гнучкості, тому буде чудово, якщо я можу підібрати щось корисне тут.

Divs укладаються вертикально за замовчуванням, тому немає необхідності в спеціальній обробці "рядків" всередині стовпця.

div {
  height:50px;
}
.short-div {
  height:25px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

Ось загадка .

Слід використовувати гніздо для завантаження стовпців.

Див. Bootstrap 3 або Bootstrap 4 :

<div class="row">
    <div class="col-md-5">Span 5</div>
    <div class="col-md-3">Span 3<br />second line</div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
    </div>
    <div class="col-md-2">Span 2</div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">Span 6</div>
            <div class="col-md-12">Span 6</div>
        </div>
    </div>
    <div class="col-md-6">Span 6</div>
</div>

http://jsfiddle.net/DRanJ/125/

(Екран В Скрипки, збільшити тестовий екран , щоб побачити результат, тому що я використовую колективним мкр - *, то реагують стеки стовпці)

Примітка . Я не впевнений, що BS2 дозволяє вкладати стовпці , але у відповіді Пола Кейстера вкладення стовпців не використовується. Ви повинні використовувати його і уникати винаходити css під час завантаження програми.

Висота стовпців є автоматичною, якщо ви додасте другий рядок (як у моєму прикладі), висота стовпців адаптується сама.

Примітка. Це було для Bootstrap 2 (актуально, коли було задано питання).

Ви можете досягти цього, використовуючи row-fluidдля створення текучого (відсоткового) ряду всередині існуючого block.

<div class="row">
   <div class="span5">span5</div>
   <div class="span3">span3</div>
   <div class="span2">
      <div class="row-fluid">
         <div class="span12">span2</div>
         <div class="span12">span2</div>
      </div>
   </div>
   <div class="span2">span2</div>
</div>
<div class="row">
   <div class="span6">
      <div class="row-fluid">
         <div class="span12">span6</div>
         <div class="span12">span6</div>
      </div>
   </div>
   <div class="span6">span6</div>
</div>

Ось приклад JSFiddle .

Я помітив, що за прольотами всередині row-fluidпісля першої є лівий край, що з’являється (або не з’являється) . Це можна виправити за допомогою невеликого налаштування CSS (це той самий CSS, який застосовується до першої дитини, розширений до тих, хто минув першої дитини):

.row-fluid [class*="span"] {
    margin-left: 0;
}

Перевірте це. сподіваємось, що це допоможе вам повноцінно.

http://jsfiddle.net/j6amM/

.row-fix { margin-bottom:20px;}

.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}

.row-fix .two-col{ background:none;}

.two-col > [class*="col"]{ height:40px; background:#ccc;}

.two-col > .col1{margin-bottom:20px;}

Відповідь Павла, здається, перемагає мету завантаження; відповіді на вікно перегляду / розмір екрана.

Вклавши рядки та стовпці, ви можете досягти однакового результату, зберігаючи чуйність.

Ось актуальна відповідь на цю проблему;

<div class="container-fluid">
  <h1>  Responsive Nested Bootstrap </h1> 
  <div class="row">
    <div class="col-md-5" style="background-color:red;">Span 5</div>
    <div class="col-md-3" style="background-color:blue;">Span 3</div>
    <div class="col-md-2">
      <div class="row">
        <div class="container" style="background-color:green;">Span 2</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:purple;">Span 2</div>
      </div>
    </div>
    <div class="col-md-2" style="background-color:yellow;">Span 2</div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="container" style="background-color:yellow;">Span 6</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:green;">Span 6</div>
      </div>
    </div>
    <div class="col-md-6" style="background-color:red;">Span 6</div>
  </div>
</div>

Ви можете переглянути кодек тут.