我的母版頁上有一個導航欄。下面是代碼：
<nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:90%; height:14% ">
<div class="container-fluid">
<span class="navbar-brand" style="display:flex;">
<img src="~/Images/Logo_Circle.png" alt="RCA" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e9c46a">My City Name</span><br />My Company Name</span>
</span>
</div>
</nav>
我想在導航欄正下方放置一個圓形按鈕，導航欄和圓形按鈕之間沒有任何空間。這是我的導航欄現在的樣子：
在這個欄的正下方，我想放置圓形按鈕。下面是一些東西，我正在嘗試做：
下面是代碼：
<div data-role="navbar">
<ul>
<li> <a href="#" class="ui-btn-active nav-border" id=viewtherecent> Recent </a> </li>
<li> <a href="#" class="nav-border" id=viewthefrequency> Frequent </a> </li>
</ul>
</div>
我試圖將這些按鈕放在導航欄下方，但它們是垂直而不是水平的。
任何幫助將不勝感激。
uj5u.com熱心網友回復：
如果您需要添加display: flex到元素，請使用.d-flex或 回應變體之一（例如，.d-sm-flex）。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar" >
<div class="container-fluid">
<span class="navbar-brand" style="display:flex;">
<img src="~/Images/Logo_Circle.png" alt="RCA" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e9c46a">My City Name</span><br />My Company Name</span>
</span>
</div>
</nav>
<div>
<ul class="d-flex">
<li><a href="#" class="ui-btn-active nav-border" id=viewtherecent>Recent </a> </li>
<li><a href="#" class="nav-border" id=viewthefrequency>Frequent</a></li>
</ul>
</div>uj5u.com熱心網友回復：
<ul>元素具有塊的默認顯示值，<li>元素具有“串列項”的默認顯示值，在此背景關系中最終表示塊。具有display: block樣式規則的元素將“在正常流程中在元素前后生成換行符。 ”
您應該為<ul>元素提供以下樣式，并且<li>鏈接將彼此相鄰顯示：
ul {
display: flex;
flex-direction: row;
}
uj5u.com熱心網友回復：
您可以使用 flexbox 根據您的喜好垂直或水平對齊我們的按鈕。
請檢查下面的代碼，我已經制作了一個帶有您想要的按鈕的導航欄。
*{
margin:0;
}
nav{
background:blue;
}
ul{
display:flex;
}
.buttons{
display:flex;
width:100%;
}
button{
width:200px;
border-radius:20px;
}
button:nth-of-type(1){
background:lightblue;
color:white;
}<nav>
<ul>
<li>Home</li>
<li>Page1</li>
</ul>
</nav>
<div class="buttons">
<button>Now</button>
<button>Recent</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/351579.html
標籤：html css bootstrap-4 弹性盒