gpt4 book ai didi

css - 两个 Bootstrap4 容器的大小调整方式不同

转载 作者:行者123 更新时间:2023-11-28 19:26:22 24 4
gpt4 key购买 nike

我有这两个容器,一个在导航栏中,另一个用于页面的其余部分,当我调整大小直到 sm-view 点时,这两个容器没有在同一垂直线上对齐。我该如何纠正它?



<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-custom sticky-top">
<div class="container">
<a class="navbar-brand" href="#"><i class='far fa-image' style='font-size:24px'></i> IMGS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent" >
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav mr-0">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>

<div class="container my-3">
<div class="jumbotron py-4 mb-3">
<h1><i class='fas fa-camera-retro' style='font-size:40px'></i> The Image Gallery</h1>
<p>A bunch of beautiful images that I didn't take(except the first one!)</p>
</div>
<div class="row ">
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1481889617387-82a8f2413b6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1430026996702-608b84ce9281?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1551356279-8337da8863d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1551897628-d053c089e823?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1555939765-9b78f509d500?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1516911588919-bf6b970eaf32?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1551222998-8a604fda1d22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1550977088-b31835bf616d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
<div class="col-sm-6 col-md-4 my-2"><img src="https://images.unsplash.com/photo-1551290465-0ac783e20542?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="" class="img-thumbnail mx-auto d-block img-fluid"></div>
</div>
</div>
</body>
</html>

最佳答案

一种快速的方法是将 px-0 px-sm-3 类添加到容器元素。

关于css - 两个 Bootstrap4 容器的大小调整方式不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56094506/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com