Question

我正在使用bootstrap并尝试在桌面和移动设备中创建以下布局。基本上，页面上有3列，最右边的列类似于动态长度的侧边栏。方框A和B用于重要信息，方框D用于页面的“主要内容”，即其他所有内容。

桌面视图

| ...... A ....... | | .... B ....没有| | ....。C .... |

| .............. d .............. | | ....。C .... |

| .............. d .............. |

移动视图

| ........甲....... |

| ........乙....... |

| ........ç....... |

| ........ d ....... |

在移动视图中，我希望这些框按顺序显示，A，B，C和D.

在dekstop视图中，我希望D从A和B的正下方开始，跨越它们的宽度。使用标准引导程序，我不能将A，B和C放在同一行中，因为D直到C结束后才会启动。我也无法在一列中嵌套A，B和D，因为在移动中它会输出A，B，d，C。

我已经看过引导列重新排序，但我看不出它在我的情况下会如何工作。也许我错过了一些明显的东西。任何帮助感激不尽！

Answer 1

最重要的部分是@media query和float：right。请注意，媒体查询在＆＃34;运行代码段＆＃34;内部无效。盒子，但它可以在外面正常工作。

＆＃13;

.block-a {
	background: red;
	height: 50px;
}

.block-b {
	background: green;
	height: 50px;
}

.block-c {
	background: yellow;
	height: 150px;
}

@media (min-width: 768px) {
	.block-c {
		float: right;
	}
}

.block-d {
	background: pink;
    height: 200px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	<div class="row">
		<div class="col-sm-6 block-a">A</div>
		<div class="col-sm-3 block-b">B</div>
		<div class="col-sm-3 block-c">C</div>
		<div class="col-sm-9 block-d">D</div>
	</div>
</div>

＆＃13;

Bootstrap列重新排序和2列跨越。我的布局可行吗？

1 个答案: