Question

我有一些样式发布，如果使用bootstrap 3可以解决这个问题。

以下是导航栏的意图： final nav bar

忽略那些简单的颜色:)只是我需要努力在列表项之间获取这些项目符号（

）

这是我可以在jsfiddle上取得的进步：

请拖动栏以使屏幕变大，以便您可以看到导航栏。

HTML：

  <div id="nav">
  <nav class="navbar navbar-default" role="navigation">
  <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="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </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"><div class="bullet"></div><a href="#">Home</a></li>
        <li><div class="bullet"></div><a href="#">Portfolio</a></li>
        <li><div class="bullet"></div><a href="#">About</a></li>
        <li><div class="bullet"></div><a href="#">Services</a></li>
        <li><div class="bullet"></div><a href="#">Contact</a><div class="bullet"></div></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
  </div>

CSS：

#nav {
    background-image: url('bg.png');
    background-repeat: repeat-x;
    min-height: 71px;
    padding-top:10px;
    margin-top: 15px;
}

@media (min-width: 768px){
    .navbar-nav{
        margin: 0 auto;
        display: table;
        table-layout: fixed;
        float:none;
    }

    .bullet {
        border-radius: 50%;
        background-color: rgb( 0, 0, 0 );
        opacity: 0.729;
        width: 7px;
        height: 7px;

    }
}

当屏幕切换到响应式下拉菜单（移动设备）时，子弹点不得显示。

长期致力于此，要求社区了解我是否可以获得帮助。我也试图搜索这个问题是否已经解决，然后进行空搜索。

Answer 1

完全删除项目符号并添加以下课程

a::before{
        content:"";
        border-radius: 50%;
        background-color: rgb( 0, 0, 0 );
        opacity: 0.729;
        width: 7px;
        height: 7px;
        margin:0 10px; 
        display:inline-block;

}

找到jsFiddle here

Answer 2

不要在你的HTML中添加项目符号。

enter image description here

DEMO：http://jsfiddle.net/hmw6e25x/

<强> CSS

@media (min-width: 768px) { 
    .navbar-nav {
        ...
    }
    .navbar-nav > li {
        position: relative
    }
    .navbar-nav > li:before,
    .navbar-nav > li:last-child:after {
        content: "";
        position: absolute;
        width: 6px;
        height: 6px;
        background: red;
        top: 50%;
        margin-top: -2px;
        right: -3px;
        z-index: 1;
        border-radius: 6px;
    }
    .navbar-nav > li:before {
        right: auto;
        left: -3px;
    }
}

Answer 3

我已更新了您的fiddle

注意：您只能在display:inline-flex

中使用HTML5

Bootstrap 3 Navbar - 在列表项之间添加Bullet Point

3 个答案: