Question

所以，我对这一切都是全新的。这是我第一个使用HTML / CSS的实际项目，所以请记住这一点。建设性的批评总是受欢迎的，因为它只会帮助我变得更好。

现在我已经解决了这个问题：

所以，我使用Bootstrap是因为它易于使用，而且根据我的经验，到目前为止用户友好。我无法解除对我的提升，但要弄清楚如何将我的下拉按钮移动到导航栏的右侧。

这是我的导航栏的代码（再次，对不起，如果它是垃圾。新的）：

<div id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top">
    <a class="navbar-brand" href="">AVC Gaming</a>
    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" role="button" aria-expanded="false">Forums <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Ban Appeal</a></li>
                    <li><a href="#">Registration</a></li>
                </ul>
            </li>

            <li class="button"><a href="">Donate</a></li>

            <li class="dropdown">
                <a href="#" role="button" aria-expanded="false">UK 111 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Forums</a></li>
                    <li><a href="#">Arma 2</a></li>
                    <li><a href="#">Arma 3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

如果需要，此处有一个实时版本：http://www.avc-gaming.us/avc

我已尝试添加＆＃34; pull-right＆＃34;到英国111下拉<ul>，但这没有做任何事情。当我添加＆＃34; pull-right＆＃34;在Donate按钮上，所有这一切都是与英国111下拉的交换位置。

有什么想法吗？

Answer 1

如果您想将所有这些内容移至页面右侧，请将if (sem_wait(s_server) == -1) { if(errno == EINTR) continue; bail_out(EXIT_FAILURE, "sem_wait(3) failed"); }放入行Float:right，如下所示：

<ul class="nav navbar-nav">

OR

如果您只想移动最后一个，请在最后一个下拉列表<div id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top"> <a class="navbar-brand" href="">AVC Gaming</a> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav" style="float:right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" role="button" aria-expanded="false">Forums <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Ban Appeal</a></li> <li><a href="#">Registration</a></li> </ul> </li> <li class="button"><a href="">Donate</a></li> <li class="dropdown"> <a href="#" role="button" aria-expanded="false">UK 111 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Forums</a></li> <li><a href="#">Arma 2</a></li> <li><a href="#">Arma 3</a></li> </ul> </li> </ul> </div> </div>上的Width:96%和<ul class="nav navbar-nav">上设置float:Right

<li class="dropdown">

Answer 2

右拉的工作方式应该如此。但是因为ul.nav navbar-nav的宽度只是占据了它的内容空间，所以它并不像你想要的那样工作。如果您在ul.nav navbar-nav上放置例如90％的宽度，您会看到它对齐。

Answer 3

您必须将英国111的<li>移至<ul>，并将“pull-right”类与您用于设置列表样式的其他类一起添加。

<div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="http://forums.avc-gaming.us" class="dropdown-toggle" role="button" aria-expanded="false">Forums <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Ban Appeal</a></li>
            <li><a href="#">Registration</a></li>
          </ul>
        </li>
        <li class="button"><a href="">Donate</a></li>
      </ul>
      <ul class="nav navbar-nav pull-right">
        <li class="dropdown">
          <a href="http://www.uk111.uk" role="button" aria-expanded="false">UK 111 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="http://www.uk111.uk/forum">Forums</a></li>
            <li><a href="http://www.uk111.uk/a2servers">Arma 2</a></li>
            <li><a href="http://www.uk111.uk/a3servers">Arma 3</a></li>
          </ul>
        </li>
      </ul>
    </div>

Answer 4

您只需添加bootstrap自己的类pull-right即可。我在这里有一个例子！

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid pull-right">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#Home">Home</a></li>
                </ul>
            </div>
        </div>

Answer 5

Bootstrap 3提供此功能。请参阅文档以获取完整的example，特别是右对齐链接：Component Alignment

关于Pull-right和Navbars

使用.navbar-left或。对齐导航链接，表单，按钮或文本   .navbar-right实用工具类。这两个类都将添加一个CSS浮动   指定的方向。例如，要对齐导航链接，请将其放入   应用了相应实用程序类的单独<ul>。

这些类是.pull-left和.pull-right的混合版本，但是   它们的范围是媒体查询，以便更轻松地处理导航栏   设备尺寸的组件。

组件对齐

右对齐多个组件Navbar目前有一个限制有多个.navbar-right类。为了适当地空间内容，我们使用最后一个.navbar-right元素的负边距。什么时候有使用该类的多个元素，这些边距不起作用意图。

请参阅FullPage上的完整工作示例代码段。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top">
  <div class="container-fluid">
    <!-- 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="#navbar-collapse" 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="">AVC Gaming</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Forums <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Ban Appeal</a>
            </li>
            <li><a href="#">Registration</a>
            </li>
          </ul>
        </li>
        <li class="button"><a href="#">Donate</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">UK 111 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Forums</a>
            </li>
            <li><a href="#">Arma 2</a>
            </li>
            <li><a href="#">Arma 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

将Bootstrap按钮对准导航栏的右侧

5 个答案: