Question

$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 右对齐但没有响应。如何使两个按钮位于导航栏的右侧？

Answer 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>

Answer 2

<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

引导程序中的导航栏列表对齐问题

2 个答案: