我的理解是,我可以将container-fluid
嵌套在navbar
中,然后使用网格。我尝试让导航栏包含3个元素:徽标在左边,导航面包屑在中间,然后按钮在右边。我用col
做了这个,它在移动的中看起来很棒。但是,在一个更大的屏幕上,它拉到左边,是混乱的,即使所有的cols
加起来是12。
代码:https://www.codeply.com/p/jTBpYDfUk9
代码如下:
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top border border-3 border-danger border-top-0 border-start-0 border-end-0">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-3 col-sm-2 col-lg-1">
<img ...>
</div>
<div class="col-6 col-sm-8 col-lg-10 tiny-text">
<nav aria-label="">
<ul class="pagination justify-content-center m-0">
<li class="page-item">
<a class="page-link p-1 px-lg-3 previous_page" href="#" aria-label="Previous">
<i aria-hidden="true" class="bi-chevron-double-left text-danger"></i>
</a>
</li>
<li class="page-item active" data-page="0"><a class="page-link p-1 px-lg-3 text-reset disabled pe-none" href="#" tabindex="-1" aria-disabled="true">1</a></li>
<li class="page-item" data-page="1"><a class="page-link p-1 px-lg-3 text-reset disabled pe-none" href="#" tabindex="-1" aria-disabled="true">2</a></li>
<li class="page-item" data-page="2"><a class="page-link p-1 px-lg-3 text-reset disabled pe-none" href="#" tabindex="-1" aria-disabled="true">3</a></li>
<li class="page-item" data-page="3"><a class="page-link p-1 px-lg-3 text-reset disabled pe-none" href="#" tabindex="-1" aria-disabled="true">4</a></li>
<li class="page-item">
<a class="page-link p-1 px-lg-3 next_page" href="#" aria-label="Next">
<i aria-hidden="true" class="bi-chevron-double-right text-danger"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-3 col-sm-2 col-lg-1 text-end">
<i class="bi-cart-fill text-danger fs-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#cart-panel" aria-controls="cart-panel"></i>
</div>
</div>
</div>
</nav>
1条答案
按热度按时间ve7v8dk21#
您只需要在第三行再添加一个引导类
w-100
,如下所示<div class="row align-items-center w-100">