gpt4 book ai didi

html - 如何将品牌、链接和 facebook 链接放在同一行? Bootstrap 3

转载 作者:太空宇宙 更新时间:2023-11-04 11:06:35 24 4
gpt4 key购买 nike

我更改了我的代码。我将 Facebook 链接移到了它自己的 <ul> 中。 bracket 然后为那个 <ul> 做了一个 .navbar-right 类元素。正如我想要的那样,这将 facebook 链接移到了右侧。我删除了之前的 CSS 代码。现在我试图让链接在屏幕上居中,品牌在左边。如何使链接居中?

<body>

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top ">
<div class="container-fluid" id="center-nav">

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brnich Karate</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

<ul class="navbar-right">
<li class="social"><a href="#" class="btn btn-inverse btn-lg"><i class="fa fa-facebook-square"></i>Find us on Facebook</a></li>
</ul>

</div>


</div>
</nav>


<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>

最佳答案

您需要将您的 Facebook 链接移动到一个单独的 <ul>在你的导航栏中列出并使用 navbar-right 将其拉到右边.

<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="social">
<a href="#" class="btn btn-inverse btn-lg">
<i class="fa fa-facebook-square"></i>Find us on Facebook
</a>
</li>
</ul>

然后您需要根据以下问题将导航栏设置为其内容居中:Center content in responsive bootstrap navbar

@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}

.navbar .navbar-collapse {
text-align: center;
}
}

参见演示 JSFiddle:https://jsfiddle.net/o8xyq519/1/

关于html - 如何将品牌、链接和 facebook 链接放在同一行? Bootstrap 3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33928022/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com