twitter-bootstrap – 引导程序组合行(rowspan)

发布时间：2020-12-17 23:41:57 所属栏目：安全来源：网络整理

导读：我测试 Twitter Bootstrap和卡住了基本脚手架与行。我重读了他们的文档次数，我可以看到嵌套列，你可以在一个列中基本上嵌套列，但我找不到将行组合成一个并使其与未组合行旁边的列对齐的能力。下图应该说明我想要完成的事情。我遇到的唯一的解决方案解

我测试 Twitter Bootstrap和卡住了
基本脚手架与行。我重读了他们的文档次数，我可以看到嵌套列，你可以在一个列中基本上嵌套列，但我找不到
将行组合成一个并使其与未组合行旁边的列对齐的能力。

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

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

有人有任何优雅的解决方案吗？
我做的大部分网页布局都需要很好的灵活性，所以如果我能在这里找到有用的东西，那么这将是巨大的。

解决方法

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>

这里是the fiddle。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!