Question

我尝试了多种方法将导航栏的不同支持内容放在屏幕右侧，但它们一直贴在徽标旁边。有人知道为什么......

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="icone.png" width="38" height="30" class="d-inline-block align-top" 
alt="sharkstein"> Sharkson & Vonstein
</a>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" id="navbarSupportedContentList">
  <li class="nav-item active">
    <a class="nav-link" href="index.html">Home <span class="sr-only">(current)
</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="blog.html">Blog</a>
  </li>
</div>
</nav>

和css一样，我也尝试过使用SupportedContentList和类

#navbarSupportedContent {
display: inline-block;
margin-right: auto;
float: right;
text-align: right;
}

Answer 1

您可以使用 Flexbox 执行此操作：

body {margin: 0}

.navbar {
  display: flex; /* displays flex-items (children) inline */
  justify-content: space-between; /* children are evenly distributed, first child is on the left and last child on the right side */
}

ul {
  list-style: none;
}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#"><img src="icone.png" width="38" height="30" class="d-inline-block align-top" alt="sharkstein">Sharkson & Vonstein</a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto" id="navbarSupportedContentList">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="blog.html">Blog</a>
      </li>
    </ul>
  </div>
</nav>

Answer 2

鲨鱼与冯斯坦

 <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto" id="navbarSupportedContentList">
           <li class="nav-item active">
                <a class="nav-link" href="index.html">Home 
                    <span class="sr-only"> 
                    (current)
                    </span>
                </a>
           </li>
           <li class="nav-item">
                <a class="nav-link" href="blog.html">Blog</a>
           </li>
 </div>

.mr-auto在包含div的右侧添加一个自动边距，因此它将始终粘贴在导航栏的左侧。如果要向右推送内容，可以使用ml.auto。它将自动在左侧添加边距，从而始终将您的内容保持在导航栏的右侧。

对齐右引导程序navbarsupportedcontent

2 个答案: