代码之家 › 专栏 › 技术社区 › Nathan Friedly

引导程序可以在桌面上堆叠第二列旁边的第1列和第3列吗?

bootstrap-4 twitter-bootstrap css

Nathan Friedly · 技术社区 · 8 年前

我正在尝试创建一个在移动设备上非常简单的布局:

[A]
[B]
[C]

[ A ][ B ]
[ C ][ B ]

bootstrap4能做到这一点吗,或者我需要编写自己的网格css吗?

更新:下面是一个我现在拥有的基本布局的示例:

.a { background-color: red; }
.b { background-color: blue; }
.c { background-color: green; }
img {max-width: 100%; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="a col-md-5">
      A
    </div>
    <div class="b col-md-7">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg" alt="B (should be right of A and C on desktop)" />
    </div>
    <div class="c col-md-5">
      <p>C (should be below A and left of B on desktop)</p>
    </div>
  </div>
</div>

https://codepen.io/nfriedly/pen/rqMLBw

更新2:这里有一些图片来澄清问题([A] 是红色,[B]是蓝色(带图像),[C]是绿色。)

所需布局:

4 回复 | 直到 8 年前

Mr. Hugo 8 年前

你可以在桌面上把[B]设为绝对值,让它贴在容器的右侧。使用此CSS:

@media (min-width: 600px) {
  .container {position: relative;}
  .b {position: absolute; right: 0; top: 0;}
}

600px 应该等于你的桌面断点。

这是一个 working version

Nathan Friedly 8 年前

最终,答案似乎是“不,Bootstrap基于flexbox的布局不能做到这一点”。

JoostS showed position “正在加载和 !important ,但这并不完全正确正在做。这更像是bootstrap在和我一路战斗的时候被打得屈服。

display: grid :

.a { background-color: red; }
.b { background-color: blue; }
.c { background-color: green; }
img {max-width: 100%; }

@media (min-width: 768px) {
  .grid-container {
    border: 1px solid black;
    display: grid;
  }
  .b {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="grid-container">
    <div class="a">
      A
    </div>
    <div class="b">
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example_image.svg" alt="B (should be right of A and C on desktop)" />
    </div>
    <div class="c">
      <p>C (should be below A and left of B on desktop)</p>
    </div>
  </div>
</div>

https://codepen.io/nfriedly/pen/bmweKB?editors=1100

这让我得到了我想要的行为,而不觉得我是诉诸黑客和战斗我的工具。它 may not work in legacy browsers ,但这对于我的用例来说是可以接受的。

Corina 8 年前

在使用bootstrap4的情况下,您可以使用'order'属性根据需要对行和列进行排序。

C{ order : 1; }
B{ order : 2;}

并且A列的顺序已为:0。

C.RaysOfTheSun 8 年前

您可以签出在引导中找到的排序类 documentation (跳转到重新排序)。

您还可以将其与屏幕大小选项一起使用,这样当页面在给定的屏幕大小上查看时,itll只会遵循该顺序。这可以通过添加xs、sm、md或lg来实现。

<div class=âcol-sm-3 order-md-3â>
    <p> sample </p>
 </div>

working example

另一方面,列宽也可以像这样展开 this

如果这不能解决你的问题。我至少希望它能给你一个关于如何只使用引导的想法:)