twitter-bootstrap - Bootstrap 组合行（rowspan）

Question

我正在测试Twitter Bootstrap并陷入了带有行的基本脚手架。我多次重新访问他们的文档，我可以看到嵌套列，您基本上可以将列嵌套在一列中，但我无法找到将行组合为一个并使其与未组合行旁边的列对齐的能力。

下图应该说明我想要完成的事情。

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

有没有人对此有任何优雅的解决方案？我所做的大部分网络布局都需要良好的灵活性，所以如果我能在这里找到一些有用的东西会很棒。

Answer 1

默认情况下，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>

输出：

这是小提琴。

Answer 2

您应该使用引导列嵌套。

请参阅引导程序 3或引导程序 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 的回答中，没有使用列嵌套。您应该使用它并避免在引导程序做得好的时候重新发明 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 示例。

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>

您可以在此处查看代码笔。

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>