1. 首页
  2. 问答
  3. Bootstrap导航栏：导航栏 - 右

Bootstrap导航栏：导航栏 - 右

2016-04-29 273 views
0

我正在使用bootstrap创建此简单的导航栏。我是使用bootstrap和css进行网页设计的新手。Bootstrap导航栏：导航栏 - 右

<body>  
    <div class="container"> 
<div class="navbar navbar-default"> 

    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"></a> 
    </div> 
    <ul class="nav navbar-nav"> 

     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Profile<span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
     </ul> 
     </li> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Comments<span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Reports</a></li> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Messages<span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
     </ul> 
     </li>  
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Sign Out</a></li> 
    </ul> 
    </div> 

    </div> 
    <div> 
</div> 
</body>

注销链接位于导航栏的边缘。它没有右边的空间。我想要的是在另一边有相同的空间。我曾尝试创建一个CSS类，并添加边距和填充，但它不起作用。

来源

2016-04-29 guwop69

+0

你有你想要的图像实现，因为我没有真正得到你想要做的 – Evochrome

+0

注销链接位于导航栏的边缘。我希望它有空间。 – guwop69

回答

0

在第二行添加一个div =“容器”后“导航栏导航栏默认，将持有的导航栏，并设置页边距

来源

2016-04-29 15:21:01

0

试试这个：

HTML

<ul class="nav navbar-nav navbar-right"> 
     <li><a class="signout" href="#">Sign Out</a></li> 
    </ul>

CSS

ul.nav.navbar-nav.navbar-right > li > a{ 
    margin-right: 30px; 
}

例：

https://jsfiddle.net/w776Lq1u/7/

来源

2016-04-29 15:21:48 Sylvain

0

如果添加导航栏的可折叠部分就增加了你想要的填充。现在，当您移动屏幕尺寸时，您的导航栏链接显示为块，并且没有响应菜单按钮。将浏览器窗口调整为较小的宽度以查看我在说什么。如果您添加了导航栏折叠和折叠按钮，那么导航栏折叠将添加您需要的填充并使导航栏响应。所以，您的标记将如下所示：

这里向您展示它应该如何看Fiddle

<div class="container"> 
    <div class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Logo</a> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <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 class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Profile<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
      </ul> 
      </li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Comments<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Reports</a></li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Messages<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
      </ul> 
      </li>  
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Sign Out</a></li> 
     </ul> 
    </div> 
    <div> 
</div>

来源

2016-04-29 15:24:25

2

我能达到你想建立一个零边距为您的权利导航栏什么小提琴。通过这样做，我只是“破”的元素的浮动，它会自动上了右手，左手侧不对齐：

<ul class="nav navbar-nav navbar-right no-margin"> 
    <li><a href="#">Sign Out</a></li> 
</ul> 

.no-margin { 
    margin: 0; 
}

Live Demo

来源

2016-04-29 15:28:26 Aer0

相关问题

 相关问题