Bootstrap объединение строк (rowspan)


128

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

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

пример макета rowspan

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

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

Ответы:


99

По умолчанию блоки Div складываются вертикально, поэтому нет необходимости в специальной обработке «строк» ​​в столбце.

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 упомянула об этом дополнительно в столбцах вложенности, поскольку подход в основном такой же.
Сеонг Ли

1
в вашем примере вы определяете 1row=25px, 2row=50px. Можете ли вы сделать так, чтобы составной div занимал высоту всей строки? попытался добавить, .row{height:100%;}но это не пошло.
Tomer W

Да, @carter исходный пример несовместим с бутстрапом 3; Я поправил.
Пол Кейстер

1
В примере есть желоба во втором ряду, что выглядит странно.
Конни ДеСинко

84

Вы должны использовать вложение столбцов начальной загрузки.

См. 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, пока бутстрап работает хорошо.

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


10
Это должен быть принятый ответ, потому что он работает с Bootstrap из коробки и не требует настройки CSS
cheenbabes

Принятый ответ более читабелен; он содержит фрагмент кода и ссылку на JSfiddle, и ИМХО примеры Пола Кейстера более ясны, чем примеры Алкалина. Вот почему я думаю, что ответ Пола Кейстера следует оставить в качестве принятого ответа, по крайней мере, до тех пор, пока ответ Алкалина не будет улучшен.
naXa

1
@Alcalyn в моем браузере (Chrome) связанная скрипка из вашего ответа не дает ожидаемого результата (см. Рисунок в вопросе). Фактический результат - все блоки div выровнены по столбцу.
naXa

1
Если вы видите один столбец со всеми выровненными интервалами, это связано с -md-правилом реагирования. Вы должны увеличить свой экран, чтобы увидеть ожидаемый результат. Если вам нужно, чтобы диапазоны отображались в виде столбцов на экранах меньшего размера, замените их -md-на -sm-или -xs-. Это вопрос о точке останова (см. Bootstrapdocs.com/v3.0.3/docs/css/#grid ).
Alcalyn

12

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

Спасибо за ваши усилия, но похоже, что для этого не нужно использовать row-fluid, как это было предложено моим выбранным ответом. Я действительно ценю это!
Сеонг Ли

1
Совершенно верно, но не забывайте, row-fluidкогда придет время начать разбиение внутренних строк на части.
pickypg

7

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

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

1

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

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

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

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

Вы можете просмотреть код здесь.


0

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>


У меня это не работает с <div class = "col-sm-2"> <div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4" style = "background- color: yellow; "> <input type =" file "id =" imgInp "name =" img "accept =". png, .jpg, .jpeg "> <! - <input type =" text "src =" "class =" form-control "id =" imgName "size =" 40 "> </input> -> <img id =" img-upload "src =" "alt =" Transporter "width =" 300% " height = "50%" class = "Round-circle" /> </div> </div> </div>
СУДИП СИНГХ

2
Добавьте пояснения к вашему коду. Чтобы ОП и будущий читатель могли легко понять ваш ответ.
Сангам Белозе
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.