Question

我开始在整个Bootstrap / flexbox网格系统中迷失方向。我尝试使用一个大的col-sm-12.col-md-12.col-lg-8和两个小列：col-sm-12.col-md-6.col-lg-4

来实现动态的2列布局

这就是我想要的大屏幕：

这适用于中型屏幕：

但是，这就是我得到的！：

＆＃13;

<!DOCTYPE html>
    <html lang="en">
      <head>
          <meta name="viewport" content="width=device-width" initial-scale="1">
          <div class="container">
  <div class="row">
    <div id="big" class="col-12 col-sm-12 col-md-12 col-lg-8">
      <p> Lots of text </p>
    </div>
    <div id="small1" class="col-12 col-sm-12 col-md-6 col-lg-4">
      <p> Little text </p>
    </div>
    <div id="small2" class="col-12 col-sm-12 col-md-6 col-lg-4">
      <p> Little text </p>
    </div>
  </div>
</div>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
      </body>
    </html>

＆＃13;

Answer 1

这似乎是嵌套网格的理想机会：

<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">
	
		<div id="big" class="col-12 col-lg-8">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quos corporis quisquam officiis sint explicabo, pariatur eveniet, quibusdam exercitationem enim quia, repudiandae laudantium reiciendis dolore quaerat asperiores accusamus! Similique dolorem ipsa veniam ducimus, excepturi nisi odio! Est quibusdam tenetur laudantium blanditiis. Corrupti omnis veniam, fugit fugiat explicabo deleniti, dolorem recusandae quod fuga qui consectetur, possimus? Dignissimos maiores, at possimus officia minus, voluptatum, ipsa magnam iste voluptatem animi quam tempore! Laborum omnis, ad soluta ducimus eligendi, fugiat natus voluptatibus sint possimus! Nihil qui excepturi, necessitatibus ipsam accusantium delectus cum culpa iure.</p>
		</div>

		<div class="col-12 col-lg-4">
			<div class="row">
			
				<div id="small1" class="col-6 col-lg-12">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
				</div>

				<div id="small2" class="col-6 col-lg-12">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
				</div>
			
			</div>
		</div>
		
	</div>
</div>

在上面的示例中，您的主网格有两列;第一个是在lg以下的所有断点处的12列宽。在lg，它是8列宽。第二列遵循相同的模式，但在lg它是4列宽。

在第二列内部，我们有嵌套网格。每列的断点不同：断点低于lg为6列，每列为lg为12列宽。

Answer 2

您可以使用以下解决方案：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div id="big" class="col-12 col-lg-8">
      <p><b>1</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quos corporis quisquam officiis sint explicabo, pariatur eveniet, quibusdam exercitationem enim quia, repudiandae laudantium reiciendis dolore quaerat asperiores accusamus! Similique dolorem ipsa veniam ducimus, excepturi nisi odio! Est quibusdam tenetur laudantium blanditiis. Corrupti omnis veniam, fugit fugiat explicabo deleniti, dolorem recusandae quod fuga qui consectetur, possimus? Dignissimos maiores, at possimus officia minus, voluptatum, ipsa magnam iste voluptatem animi quam tempore! Laborum omnis, ad soluta ducimus eligendi, fugiat natus voluptatibus sint possimus! Nihil qui excepturi, necessitatibus ipsam accusantium delectus cum culpa iure.</p>
    </div>
    <div class="col-12 col-lg-4">
      <div class="row">
        <div id="small1" class="col-12 col-md-6 col-lg-12">
          <p><b>2</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
        </div>
        <div id="small2" class="col-12 col-md-6 col-lg-12">
          <p><b>3</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

不同设备的情况如何？

小视图（如iPhone 6）： 所有列都具有相同的设备全宽（col-12）。我不建议为第2列和第3列创建两列。
中等视图（如iPad）： 第一列是全宽（col-12），位于第2列和第3列之上。第2列和第3列在一行中具有相同的宽度（col-6），彼此相邻。
大视图（如桌面/笔记本电脑）： 第1列使用宽度的2/3。第2列和第3列位于右列（宽度的1/3），彼此相邻。

要检查不同的断点，我建议使用浏览器插件（Google Chrome）Window Resizer或Google Chrome上的设备工具栏（ Ctrl + Shift + M 在开发人员工具 F12 上。

如何格式化不同高度的列？

2 个答案: