Question

我对学习bootstrap非常陌生，我刚刚完成了我的导航栏＆＃39;。

我很困惑，每当我试图为我的无序列表拉右时，它只是停留在中间？请帮忙，我很困惑..

HTML：

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-brand">
            <a href="#">
                <img class="nav-img" src="img/span-img.png" />
            </a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav pull-right">
                <li><a href="">HOME</a></li>
                <li><a href="">ABOUT</a></li>
                <li><a href="">CAREERS</a></li>
                <li><a href="">CONTACT US</a></li>
                <li><a href="">ADVERTISING</a></li>
            </ul>
        </div>
        </div>
    </div>
</div>

CSS：

.navbar{
  background-color:#282828;
  height:83px;
  margin-top:0px;
}

.navbar .nav-img{
  height:77px;
  width:108px;
  margin-top:-12px;
}

Answer 1

对pull-right而不是div尝试ul，如下所示： Demo

 <div class="collapse navbar-collapse navHeaderCollapse pull-right">
    <ul>..</ul>
  </div>

Answer 2

您可以通过制作文件custom.css

，根据您的方便自定义默认css

在这里阅读更多内容：

https://bootstrapbay.com/blog/customize-bootstrap/

Answer 3

将样式应用于父div而不是ul元素。

<div class="collapse navbar-collapse navHeaderCollapse pull-right">

或将css类应用于div，然后在css文件中设置样式，如：

<div class="collapse navbar-collapse navHeaderCollapse style"></div>

css文件说style.css将包含代码：

.style{
pull-right;
}

它易于操作，因为如果需要，可以重复使用它。

Answer 4

您可以尝试关闭navbar-brand div：

<div class="navbar-brand">
    <a href="#">
        <img class="nav-img" src="img/span-img.png" />
    </a>
</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

我遇到了类似的问题，这似乎对我有用！

Answer 5

使用它可以帮助你

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-brand">
            <a href="#">
                <img class="nav-img" src="img/span-img.png" />
        </a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        <div class="collapse navbar-collapse navHeaderCollapse" style="width=100%;">
            <ul class="nav navbar-nav pull-right">

                <li><a href="">HOME</a></li>
                <li><a href="">ABOUT</a></li>
                <li><a href="">CAREERS</a></li>
                <li><a href="">CONTACT US</a></li>
                <li><a href="">ADVERTISING</a></li>

            </ul>
        </div>
        </div>
    </div>
</div>

Bootstrap没有向右拉

5 个答案: