Question

我正在使用Bootstrap创建一个网站，我有一个问题。我想pull和push column s并使用类似＆＃34;更多＆＃34;在12 column中，有可能吗？在移动版本上，它会在下一个column之一上放置第3个row。也许下面的image会有所帮助。

DESKTOP
---------------------------
|     1           --------|---------
| ----------      | 2     |        |
| |3       |      |       |        |
| ----------      |       |        |
---------------------------        |
                  |                |
                  ------------------
Reverse version
         ---------------------------
---------|--------    1            |
|        |       |      ---------- |
|2       |       |      |3       | |
|        |       |      ---------- |
|        ---------------------------
|                |
------------------
Mobile
---------------------------
|1  ------------------    |
|   | 2              |    |
|   |                |    |
|   |                |    |
---------------------------
    |                |
    ------------------
---------- 
| 3      |
----------

我尝试过这样的事情，但我不知道如何反向row。反向class无法与div内的div一起使用，这就是为什么我要将1和2 column放在常规column上pull彼此相邻并使用push和column，但第二个column向下走。我不知道如何从row中导出第3个.webbg { height: 30vw; background-color: aqua; background-repeat: no-repeat; max-height: 75vw; }。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid my-5">
<div class="row">
	<div class="col-sm-12 col-md-8 offset-md-0 offset-lg-1 webbg" style="background-color: aqua;">
	<div class="col-3"><h3 class="text-uppercase"><strong>sometext</strong></h3></div>
	<div class="col-sm-12 offset-sm-0 col-md-12 col-lg-12 offset-md-4 offset-lg-4 offset-xl-7">
		<img src="http://www.tweaks.pl/wp-content/uploads/2015/10/aoc-u3477pqu.png" class="img-fluid">
	</div>	
	</div>
	
</div>	
</div>

＆＃13;

http://localhost:4200/assets/dummy-response/authentication/login.dummy.json

＆＃13;

Answer 1

如果我理解您的澄清，您希望A列和B列折叠到每个小型设备上的.row 1/2，而C列占据下面的整个空间。并且（我假设）在较大的屏幕上，它们每个都占用相同的空间？

在这种情况下，这是基本的 Bootstrap网格响应式设计。 Bootstrap 4中的内容稍有变化，因为它们转向Flexbox，所以你一定要使用网格语法重新定位自己：

http://getbootstrap.com/docs/4.0/layout/grid/

要实现上述布局，您可以使用类似于以下内容的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class="container">
  <div class="row text-center">
    <div class="col-6 col-md-4" style="background:#999">A</div>
    <div class="col-6 col-md-4" style="background:#777">B</div>
    <div class="col-12 col-md-4" style="background:#555">C</div>
  </div>
</div>

上述代码的读取方式如下：

对于A和B，使用“6 of 12”列作为最小断点。对于 'medium'和更多使用'4 of 12'列。对于C，请使用完整列对于最小的断点。对于'中等'以及更多使用'4 of 12' 列。

您可以根据需要进行调整，但如果您打算在同一行中显示每个列的中等和更高，则必须加起来为12。

引导推拉

1 个答案: