Bootstrap 组合行(行跨度)的引导程序

wztqucjr 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(6)|浏览(122)

我正在测试Twitter Bootstrap，遇到了行的基本搭建。我多次重新查看了他们的文档，我可以看到嵌套列，基本上可以在一列中嵌套列，但我无法找到将行合并为一行并将其与未合并行旁边的列对齐的功能。
下面的图片应该说明我想完成什么。

我遇到的唯一变通解决方案是使用表，但我不喜欢这个想法，因为我的观点是使用表不会产生响应。
有没有人对此有任何优雅的解决方案？我做的大多数网页布局将需要良好的灵活性，所以它将是伟大的，如果我能拿起一些有用的东西在这里。

twitter-bootstrap

来源：https://stackoverflow.com/questions/16351404/bootstrap-combining-rows-rowspan

6条答案

按热度按时间

30byixjq1#

默认情况下，Div垂直堆叠，因此不需要对列中的“行”进行特殊处理。
第一个
输出量：

这里是the fiddle。

赞(0）回复(0）举报 2022-12-07

mpgws1up2#

您应该使用引导数据行巢状。

请参见引导数据库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/
(In Fiddle屏幕，放大你的测试屏幕来查看结果，因为我使用col-md-*，然后响应堆栈列）

注意：我不确定BS 2是否允许列嵌套，但在Paul Keister的回答中，没有使用列嵌套。您应该使用它，避免在引导程序做得很好的情况下重新创建css。

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

赞(0）回复(0）举报 2022-12-07

ryhaxcpt3#

注：这是针对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中第一个子元素之后的span有一个奇怪的左边距，这个左边距可以通过一个小的CSS调整来修复（它和应用于第一个子元素的CSS是一样的，扩展到第一个子元素之后的子元素）：

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

赞(0）回复(0）举报 2022-12-07

hgb9j2n64#

看看这个，希望对你有帮助。
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;}

赞(0）回复(0）举报 2022-12-07

vatpfxk55#

保罗的回答似乎挫败了 Bootstrap 的目的;即响应于视口/屏幕尺寸。
通过嵌套行和列，您可以获得相同的结果，同时保持响应性。
以下是对此问题的最新答复;

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

赞(0）回复(0）举报 2022-12-07

kpbwa7wx6#

第一个

赞(0）回复(0）举报 2022-12-07