<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
所以我最近开始利用自己的时间练习HTML和CSS。我刚刚开始使用bootstrap建立一个网站,我在这个导航栏上遇到了问题:你可以在webstie:https://getbootstrap.com/docs/4.0/components/navbar/上找到它,然后向下滚动到“navbar”(我不知道如何在这里包含HTML代码)。
我想要做的是让项目“主页”、“功能”、“定价”和“禁用”“搜索”(我将实现的搜索栏)浮动到右侧。最终,我会有类似这样的东西:
功能定价已禁用#搜索
但我似乎做不到。我试着使用span标签,ul标签,我试着删除一些div元素,但都不起作用。有什么帮助吗?
我还有一个问题。如果我在div中添加:"Navbar“,那么它仍然与其他导航元素(主页、定价等)保持一致。它们位于不同的div中。那件事怎么可能?divs不是块元素吗?
发布于 2018-06-13 07:19:53
学习和使用FlexBox
它是一个非常强大的css布局库,大多数浏览器都支持它。
在这里查看导航栏的一个示例。有很多方法可以让你右对齐。一种方法是将一个空元素放在nav元素的左侧,该元素占用剩余空间,从而将元素一直推到右侧。
要为Bootstrap示例实现此目的,请执行以下操作
我所做的就是添加
<div style="flex-grow: 1;"></div>
就在下面
<div class="collapse navbar-collapse" id="navbarSupportedContent">
就在上面
<ul class="navbar-nav mr-auto">
发布于 2018-06-13 07:50:01
如果你只想使用Bootstrap特性,你可以用下面的代码包装你的链接:
<ul class="nav navbar-nav navbar-right">
<links>
</ul>
不使用bootstrap:
.align-left { float: left }
.align-right { float: right }
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="align-left">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse align-right" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
<div style="clear: both;"></div>
</nav>
发布于 2018-06-13 07:19:35
您可以使用类mr-auto
将元素固定在右侧。
你的代码将变成:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
https://stackoverflow.com/questions/50827034
复制相似问题