Бутстрап, объединяющий строки (rowspan)

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

Ниже изображение должно иллюстрировать то, что я хочу выполнить.

rowspan layout sample

Единственное решение, с которым я столкнулся, - это использовать таблицы, но мне не нравится эта идея поскольку я считаю, что отзывчивость не будет работать с использованием таблиц.

Есть ли у кого-нибудь изящное решение? Большая часть веб-макета, которую я делаю, потребует точного уровня гибкости, поэтому будет здорово, если я смогу найти что-то полезное здесь.

Ответы

Ответ 1

По умолчанию стеки 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>

Ответ 2

Вы должны использовать вложенную колонку вложенности.

Смотрите 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/

(На экране Fiddle увеличьте экран теста, чтобы увидеть результат, потому что я использую col- md - *, а затем столбцы адаптивных стеков)

Примечание: я не уверен, что BS2 допускает вложение столбцов, но в ответе Пола Кейстера вложение столбцов не используется. Вы должны использовать его и избегать повторного создания CSS, пока начальная загрузка идет хорошо.

Высота столбцов устанавливается автоматически, если вы добавляете вторую строку (как в моем примере), высота столбца адаптируется.

Ответ 3

Примечание. Это было для 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;
}

Ответ 4

Проверьте это. надеюсь, что это поможет вам в полной мере.

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;}

Ответ 5

Ответ Павла, кажется, побеждает цель бутстрапа; чтобы реагировать на размер окна просмотра/экрана.

При вставке строк и столбцов вы можете добиться того же результата, сохраняя отзывчивость.

Вот актуальный ответ на эту проблему:

<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>

Ответ 6

div {
  height:50px;
}
.short-div {
  height:25px;
}
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;" 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>