如何在bootstrap中启动col网格

Question

我在上图中显示的bootstrap中有3 col的中等视图，即

我想在小视图中实现这种类型的视图是col-sm - *

我的代码是

<div class="col-md-8">
  <div class="col-md-12">A</div>
  <div class="col-md-12">C</div>
</div>
<div class="col-md-4">
  <div class="col-md-12">B</div>
</div>

以这种方式我可以在中等视图中实现我的目标，但是无法在小视图中实现。我可以实现图像中所示的视图以及中小视图。

Answer 1

我建议您同时阅读bootstrap css doc this

但试试这个：

<div class="row">
    <div class="all a col-sm-12 col-md-6">A</div>
    <div class="all b col-sm-12 col-md-6">B</div>
    <div class="clearfix"></div>
    <div class="all c col-sm-12 col-md-6">C</div>
</div>

如果您不关心高度不匹配，可以删除<div class="clearfix"></div> 这是一个有效的jsfiddle

Answer 2

这有点紧张，但你可以试试这个： -

<div class="col-md-8">
  <div class="col-md-12">A</div>
  <div class="col-md-12 visible-sm visible-xs">B</div>
  <div class="col-md-12">C</div>
</div>
<div class="col-md-4 hidden-sm hidden-xs">
  <div class="col-md-12">B</div>
</div>

坦率地说，我想不出任何其他使用HTML和CSS的解决方案。虽然，如果涉及脚本，那将是一个不同的情况。

Answer 3

首先，你不应该指定没有行的列，所以你应该有类似的东西：

<div class="row">
  <div class="col-md-8 col-xs-12">A</div>
  <div class="col-md-4 pull-right col-xs-12">B</div>
  <div class="col-md-8 col-xs-12">C</div>
</div>

所以你向右拉你的B Div（因此不清除下一个div，并将其间隔开）。使用col-xs-12，您可以确保浮动不会出现在移动设备中。

Heres a pen

现在，如果您想继续使用代码，我猜Shan答案是最好的。

好吧，你可以拥有B的高度并使用边距，这样定位就可以了，但这并不是最佳实践，可能会导致一些错误。