Bootstrap布局，行内可变高度列内容，并将它们正确地包装在不同的屏幕上

时间：2018-01-22 22:24:45

标签： html css twitter-bootstrap bootstrap-4

enter image description here 需要根据屏幕尺寸使用bootstrap4正确定位块。在较大的屏幕中，所有都应该在一行中，但是当屏幕尺寸减小到中等时，最右边的块应该低于第一个。我尝试使用d-none类，它的工作原理。但是，需要重复代码。所以，只是想确定，这是一种正确的方法。谢谢！

＆＃13;
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters">
  <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: red; height: 60px">
    <p>Bread Crump</p>
    <p>Bread Crump</p>
	<div class="d-none d-md-block d-lg-none mt-2" style="background-color: pink; height: 100px">
		<p>List</p>
		<p>List</p>
		<p>List</p>
    </div>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: green; height: 150px">
    <p>Name</p>
    <p>Name</p>
    <p>Name</p>
    <p>Name</p>
  </div>
  <div class="col-sm-12 col-md-6 col-lg-4 d-md-none d-lg-block" style="background-color: pink; height: 100px">
    <p>List</p>
    <p>List</p>
    <p>List</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

在Bootstrap 4中执行此操作的正确方法是使用order类在不同的断点处重新排序列，如下所示：

＆＃13;
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="row no-gutters">
    <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: red;">
        <p>Bread Crump</p>
        <p>Bread Crump</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: green; height: 150px">
        <p>Name</p>
        <p>Name</p>
        <p>Name</p>
        <p>Name</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 order-md-2 order-lg-3" style="background-color: pink; height: 100px">
        <p>List</p>
        <p>List</p>
        <p>List</p>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

order-md-2课程说：你在中（md）屏幕上方（以及下方）放置2。

order-lg-3课程说：你要在大（lg）及以上的屏幕上放置3。

哦，当然，如果你重新安排一下HTML，你可以只使用一个order类，而不是像这样两个：

＆＃13;
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row no-gutters">
    <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: red;">
        <p>Bread Crump</p>
        <p>Bread Crump</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 order-md-3" style="background-color: pink; height: 100px">
        <p>List</p>
        <p>List</p>
        <p>List</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4" style="background-color: green; height: 150px">
        <p>Name</p>
        <p>Name</p>
        <p>Name</p>
        <p>Name</p>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

第二个代码段中的order-md-3类告诉第二列：

＆＃34;你通常在这里排名第二，但从中（md）断点开始，你将成为第三名！＆＃34;

当然，我可以用同样的方式处理第一个代码片段中的第二列（使用order-md-3类）。这些只是不同的选择。

最后，您还可以使用第二列上的order-md-last类来告诉它从中断点开始到最后。

相关问题
最新问题