合并行的引导程序（行跨度）

127

我正在测试Twitter Bootstrap，并陷入行的基本脚手架。我重新查看了他们的文档次数，可以看到嵌套列，您基本上可以将列嵌套在列中，但是我无法定位将行合并为一个并使其与未合并行旁边的列对齐的功能。

下图应说明我要完成的工作。

行跨布局样本

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

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

twitter-bootstrap  bootstrap-grid 
— 李成
source

Answers:

98

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

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>
展开摘要

这是小提琴。

— 保罗·基斯特
source
2
非常感谢。那就是我想要的！我希望Bootstrap文档在嵌套列下额外提及此方法，因为方法基本相同。
— 成李
1
在你的例子定义1row=25px，2row=50px。您可以将跨度div设置为与整行一样高吗？尝试添加，.row{height:100%;}但没有成功。
— Tomer W
是的，@ carter原始示例不符合引导程序3；我已经改正了。
— Paul Keister 2015年
1
该示例在第二行上有多个装订线，看起来很奇怪。
— 康妮·德辛科
83

您应该使用引导程序列嵌套。

请参阅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屏幕中，放大测试屏幕以查看结果，因为我使用的是colmd- *，然后使用响应堆栈列）

注意：我不确定BS2是否允许列嵌套，但在Paul Keister的回答中，未使用列嵌套。您应该使用它，并避免在引导程序运行良好时重新发明CSS。

列高是自动的，如果您添加第二行（如我在示例中所做的那样），则列高会自动调整。

— 阿尔卡林
source
10
这应该是一个可以接受的答案，因为它与Bootstrap兼容，并且不需要任何CSS调整
— cheenbabes 2015年
接受的答案更具可读性；它包含一个代码段以及JSfiddle和IMHO的链接。恕我直言，Paul Keister的示例比Alcalyn的示例更清晰。这就是为什么我认为应将Paul Keister的答案保留为可接受的答案，至少要等到Alcalyn的答案得到改善为止。
— naXa
1
在我的浏览器（Chrome）中，@ Alcalyn答案中的链接小提琴无法产生预期的结果（请参阅问题图片）。实际结果是将所有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相同，并且扩展到超过第一个孩子的CSS）：

.row-fluid [class*="span"] {
    margin-left: 0;
}
— pickypg
source
感谢您的努力，但看起来行不必像我选择的答案所建议的那样使用行流体来完成此任务。我真的很感激！
— 成李
1
非常正确，但是不要忘记row-fluid何时开始对内部行进行子拆分。
— pickypg
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>
展开摘要

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

— 瓦萨韦斯特
source
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>
展开摘要

— 苏迪·辛格
source
对于<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 =”运输者“ width =” 300％“ height =“ 50％” class =“ rounded-circle” /> </ div> </ div> </ div>
— SUDIP SINGH
2
请在您的代码周围添加说明。以便OP和未来的读者可以轻松理解您的答案。
— Sangam Belose
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.