引导组合行（rowspan）

Question

我正在测试Twitter Bootstrap并坚持下去 带行的基本脚手架。我重新访问了他们的文档次数，我可以看到嵌套列，您可以在列中基本上嵌套列但我找不到 将行组合成一个并使其与未组合行旁边的列对齐的功能。

下面的图片应说明我想要完成的任务。

我遇到的唯一解决方法是使用表格，但我不喜欢这个想法 我的观点是响应性不适用于表的使用。

有没有人对此有任何优雅的解决方案？ 我所做的大多数网页布局都需要很高的灵活性，所以如果我能在这里找到有用的东西，那将会非常棒。

Answer 1

默认情况下垂直划分堆栈，因此不需要对列中的“行”进行特殊处理。

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>

这是the fiddle。

Answer 2

您应该使用bootstrap列嵌套。

请参阅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是否允许列嵌套，但在Paul Keister的回答中，未使用列嵌套。你应该使用它，并避免在bootstrap运行良好时重新使用css。

列高度是自动的，如果你添加第二行（就像我在我的例子中那样），列高度会自行调整。

Answer 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 example。

我确实注意到在第一个之后row-fluid内部的跨度出现（或没有出现）奇怪的左边距。这可以通过一个小的CSS调整来修复（它与应用于第一个孩子的CSS相同，扩展到超过第一个孩子的那个）：

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

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

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

你可以view the codepen here.

Answer 6

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>