我有這個帶圖標的導航欄： 在此處輸入圖像描述圖標位于 DIV 的中心，但我想要的是填充所有 DIV，然后左右沒有空格。包含它的 DIV 是這樣的： 在此處輸入圖像描述我的是一個 REACT 應用程序，我也使用 bootstrap。 我嘗試添加 margin-left: 0 和 margin right-right: 0，但這不起作用。這是 HTML 代碼<nav class="navbar navbar-expand navbar-light bg-light fixed-bottom" style="padding-top: 0px; padding-bottom: 0px; width: 100%;"> <div class="bottom-nav navbar-nav" style="height: 100%; margin: 0px auto;"> <a href="#law" data-rb-event-key="#law" class="nav-icon fa-2x nav-link"> ICON </a> <a href="#bar" data-rb-event-key="#bar" class="nav-icon fa-2x nav-link"> ICON </a> </div></nav>不要忘記我使用 bootstrap，謝謝。你能幫助我嗎？ 謝謝
1 回答
jeck貓
TA貢獻1909條經驗 獲得超7個贊
只需添加一個自定義類并為您的導航提供全寬。您的導航有display: flex;。因此您可以使用 justify-content: space-between; 來分發您的圖標：
.custom-nav {
justify-content: space-between;
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand navbar-light bg-light fixed-bottom" style="padding-top: 0px; padding-bottom: 0px; width: 100%;">
<div class="bottom-nav navbar-nav custom-nav" style="height: 100%; margin: 0px auto;">
<a href="#law" data-rb-event-key="#law" class="nav-icon fa-2x nav-link">
<i class="fas fa-star"></i>
</a>
<a href="#bar" data-rb-event-key="#bar" class="nav-icon fa-2x nav-link">
<i class="fas fa-glass-cheers"></i>
</a>
<a href="#restaurant" data-rb-event-key="#restaurant" class="nav-icon fa-2x nav-link">
<i class="fas fa-utensils"></i>
</a>
<a href="#store" data-rb-event-key="#store" class="nav-icon fa-2x nav-link">
<i class="fas fa-store"></i>
</a>
</div>
</nav>
- 1 回答
- 0 關注
- 101 瀏覽
添加回答
舉報
0/150
提交
取消