我的理解是我可以嵌套container-fluid在里面navbar然后使用網格。我試圖讓導航欄有 3 個元素：左側徽標，導航面包屑中心，然后右側按鈕。我這樣做了col，它在移動設備上看起來很棒。然而，在更大的螢屏中，它會拉到左邊并搞砸了，即使所有cols加起來都是 12。
Codeply：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>
uj5u.com熱心網友回復：
你只需要w-100像這樣在第三行添加一個引導類<div >
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/516852.html
標籤：htmlcss推特引导
上一篇：行內輸入和按鈕
下一篇：在引導網格中的專案之間添加邊距