$users = DB::select(
"SELECT
status, date, id, name, xxx
FROM users
WHERE status >= 2
ORDER BY date_assign_fa DESC"
);
这段代码可以很好地为我提供所需的导航栏。然而,登录和探索实验按钮没有向右对齐。尽管试图将 mr-auto 和 mr-right 添加到 ul。尝试做自定义 css 右对齐但没有响应。如何使两个按钮位于导航栏的右侧?
答案 0 :(得分:1)
你能看看下面的代码吗?希望它对你有用。如果您添加 bootstrap 4,那么它工作正常,并且您想在同一行中设置按钮,那么您必须在 flex-direction
中添加 .navbar-nav
以便它按照您的要求工作。
请参考此链接:https://jsfiddle.net/yudizsolutions/syakr3j5/
.navbar-nav {
flex-direction: row !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<!--main div-->
<div>
<nav class="navbar navbar-light bg-light">
<a href="https://wwww.kidsedge.in" class="navbar-brand"><img id="logo" src="logo_white_background.jpg"></a>
<ul class="navbar-nav list-unstyled d-flex">
<li class="nav-item">
<button><a href="#" class="nav-link">Login</a></button>
<!--Login Link-->
</li>
<li class="nav-item ml-2">
<button><a href="#" class="nav-link">Explore Live Experiments</a></button>
<!--Current Available Live Courses Link-->
</li>
</ul>
</nav>
</div>
</div>
答案 1 :(得分:0)
<nav class="navbar navbar-light bg-light d-flex">
<a href="https://wwww.kidsedge.in" class="navbar-brand"><img id="logo" src="logo_white_background.jpg"></img></a>
<ul class="navbar-nav list-unstyled ml-auto">
<li class="nav-item">
<button><a href="#" class="nav-link">Login</a></button><!--Login Link-->
</li>
<li class="nav-item ml-2">
<button><a href="#" class="nav-link">Explore Live Experiments</a></button><!--Current Available Live Courses Link-->
</li>
</ul>
</nav>
在 <nav>
上添加 d-flex 类,在 <ul>
上添加 ml-auto