Question

我正在尝试创建一个小型的Sinatra应用程序。目前，尝试在bootstrap的帮助下设置条件导航栏。我正在尝试使用navbar-right在右侧显示注册/登录/注销链接，但它无法正常工作。它只显示左侧的所有内容。我的导航栏代码如下所示..

编码提示

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div >

            <!-- Main nav bar -->
            <ul class="navbar-right nav navbar-nav">
              <% if logged_in? %>
                 <li>
                   <a href="/user/tips">User's tips</a>
                 </li>
                 <li>
                   <a href="/tips/new">New Tip</a>
                 </li>
                 <li>
                   <a href="/logout"> Sign out</a>
                 </li>
                 <% else %>
                  <li>
                    <a href="/signup">Sign Up</a>
                  </li>
                  <li>
                    <a href="/login">Sign In</a>
                  </li>
                <% end %>
                </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>

我还将style.css添加到自定义样式我的导航栏，如下所示..

./*///// NAVBAR ////*/
/* while header */
.navbar-default { background-color: #111111; border-color: transparent; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 300; letter-spacing: 1px; font-size: 5em; /* while fixed */ }
.navbar-default .navbar-header .navbar-brand { font-family: 'Arial', 'sans-serif'; font-size: 1em; color: #31002e; font-weight: 200; text-transform: uppercase; padding: 20px 25px; }
.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { color: #FF0000; }
.navbar-default .navbar-header .navbar-toggle {font-family: 'Arial', 'sans-serif'; font-size: 1em; color: #31002e; font-weight: 200; text-transform: uppercase; padding: 20px 25px;}
.navbar-default .nav > li > a { font-family: 'Arial', 'sans-serif'; text-transform: uppercase; letter-spacing: 2px; font-size: 1em; font-weight: 200; color: #31002e; padding: 20px 25px;  }
.navbar-default .nav > li > a:focus { color: #FF0000; }
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { color: #FF0000; }
.navbar-default .nav > li.active > a { color: #FF0000; background-color: #111111; }
.navbar-default .nav > li.active > a:focus { color: #FF0000; background-color: #111111; }
.navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover { background-color: #111111; }
.navbar-default .nav > li > a.selected { color: #fff; background-color: black;}
.navbar-default .affix { background-color: #111111; }
.navbar-default .affix .navbar-header .navbar-brand:hover, .navbar-default .affix .navbar-header .navbar-brand:focus { color: #FF0000; }
.navbar-default .affix .nav > li.active > a { color: #FF0000; }
.navbar-default .affix .nav > li.active > a:focus { color: #FF0000; }
.navbar-default .affix .nav > li > a:hover, .navbar-default .affix .nav > li > a:active, .navbar-default .affix .nav > li > a:focus, .navbar-default .affix .nav > li > a:focus:hover { color: #FF0000; }

有任何解决这个问题的建议吗？

Answer 1

向pull-right添加ul应该修复它：

pull-right上课你可以在这里找到来源：

.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}

https://github.com/twbs/bootstrap/blob/v3.3.7/dist/css/bootstrap.css#L6519-L6524

.
/*///// NAVBAR ////*/


/* while header */

.navbar-default {
  background-color: #111111;
  border-color: transparent;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 5em;
  /* while fixed */
}

.navbar-default .navbar-header .navbar-brand {
  font-family: 'Arial', 'sans-serif';
  font-size: 1em;
  color: #31002e;
  font-weight: 200;
  text-transform: uppercase;
  padding: 20px 25px;
}

.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
  color: #FF0000;
}

.navbar-default .navbar-header .navbar-toggle {
  font-family: 'Arial', 'sans-serif';
  font-size: 1em;
  color: #31002e;
  font-weight: 200;
  text-transform: uppercase;
  padding: 20px 25px;
}

.navbar-default .nav > li > a {
  font-family: 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1em;
  font-weight: 200;
  color: #31002e;
  padding: 20px 25px;
}

.navbar-default .nav > li > a:focus {
  color: #FF0000;
}

.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
  color: #FF0000;
}

.navbar-default .nav > li.active > a {
  color: #FF0000;
  background-color: #111111;
}

.navbar-default .nav > li.active > a:focus {
  color: #FF0000;
  background-color: #111111;
}

.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
  background-color: #111111;
}

.navbar-default .nav > li > a.selected {
  color: #fff;
  background-color: black;
}

.navbar-default .affix {
  background-color: #111111;
}

.navbar-default .affix .navbar-header .navbar-brand:hover,
.navbar-default .affix .navbar-header .navbar-brand:focus {
  color: #FF0000;
}

.navbar-default .affix .nav > li.active > a {
  color: #FF0000;
}

.navbar-default .affix .nav > li.active > a:focus {
  color: #FF0000;
}

.navbar-default .affix .nav > li > a:hover,
.navbar-default .affix .nav > li > a:active,
.navbar-default .affix .nav > li > a:focus,
.navbar-default .affix .nav > li > a:focus:hover {
  color: #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Collect the nav links, forms, and other content for toggling -->
<div>

  <!-- Main nav bar -->
  <ul class="navbar-right nav navbar-nav pull-right">
    <% if logged_in? %>
      <li>
        <a href="/user/tips">User's tips</a>
      </li>
      <li>
        <a href="/tips/new">New Tip</a>
      </li>
      <li>
        <a href="/logout"> Sign out</a>
      </li>
      <% else %>
        <li>
          <a href="/signup">Sign Up</a>
        </li>
        <li>
          <a href="/login">Sign In</a>
        </li>
        <% end %>
  </ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

navbar-right在引导程序导航中没有响应

1 个答案: