1

引导程序中的中等视图中的 3 col

我在上图所示的引导程序中的中等视图中有 3 列，即。

在此处输入图像描述

我想在小视图中实现这种类型的视图是 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>

通过这种方式，我可以在中等视图中实现我的目标，但在小视图中无法实现。我怎样才能实现两个视图以及中视图和小视图，如图所示。

4

3 回答 3

1

我建议也阅读bootstrap css doc

但是试试这个：

<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

于 2015-10-05T19:14:35.750 回答
0

这有点牵强，但你可以试试这个： -

<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 的任何其他解决方案。虽然，如果涉及脚本，情况就不同了。

于 2015-10-05T20:16:14.107 回答
0

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

<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 您可以确保浮动不会出现在移动设备中。

这是一支笔

现在，如果你想保留你的代码，我猜Shan的答案是最好的。

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

于 2015-10-05T20:48:22.023 回答