Bootstrap 在左侧对齐项目而不留出空间，在右侧对齐项目并自动调整间距

d8tt03nd 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(1)|浏览(144)

我有3个项目显示在大屏幕上一样：

_____________
|  1 |   3  |
|____|      |
|  2 |______|
|____|

第1项和第2项需要刚好在彼此的下面，第3项在右侧，不要留下任何空间。
在小屏幕上，它应该如下所示：

______
|  1 |
|____|
|  3 |
|____|
|  2 |
|____|

代码：

<div class="container">
    <div class="row">
        <div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat suscipit, voluptate exercitationem, soluta officia nesciunt dolorem illum enim vel ut natus, magni debitis doloribus nulla autem aspernatur nihil commodi voluptas.</div>
        <div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.</div>
        <div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium amet nisi vitae, accusantium commodi debitis quae exercitationem odio rem ut dolores quibusdam nostrum recusandae, quis, minima ad dignissimos mollitia.</div>
    </div>
</div>

演示：
https://jsfiddle.net/pf0j1ehz/
它可以用柔性属性来完成吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/73734385/align-items-on-the-left-side-without-leaving-space-and-on-the-right-side-with-a

1条答案

按热度按时间

ilmyapht1#

我所要做的是将你的前两个div Package 到一个容器中，然后将你的第三组 Package 到另一个容器中，然后将每个容器的宽度设置为50%，这样就可以保持你想要的例子中的宽度。
看看我在这里做了什么：

#leftgroup {
  width: 50%;
}

#rightgroup {
  width: 50%;
}

.row{
display: flex;
}

<div class="container">
    <div class="row">
    
    <div id="leftgroup">
    <div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat suscipit, voluptate exercitationem, soluta officia nesciunt dolorem illum enim vel ut natus, magni debitis doloribus nulla autem aspernatur nihil commodi voluptas.</div>
    <div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.
    </div>
    </div>
    
     <div id="rightgroup">
    <div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium amet nisi vitae, accusantium commodi debitis quae exercitationem odio rem ut dolores quibusdam nostrum recusandae, quis, minima ad dignissimos mollitia.</div>
    </div>
  </div>
</div>

编辑，因为OP改变了他的问题，这里是修改后的答案。你可以使用网格沿着grid-template-areas来做这件事，并使用媒体查询来改变grid-template-areas以适应更小的屏幕。
请参见此处：
一个二个一个一个

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 在左侧对齐项目而不留出空间，在右侧对齐项目并自动调整间距

1条答案

相关问题

热门标签

最新问答