Bootstrap：想要更改下拉导航栏中 2 个元素之间的距离

【问题标题】：Bootstrap: want to change distance between 2 elements in a Dropdown NavbarBootstrap：想要更改下拉导航栏中 2 个元素之间的距离
【发布时间】：2016-12-03 05:42:03
【问题描述】：

在较低的 Navbarenter image description here（红色）中，您可以看到两个列表元素。我希望 Glyphicon 和 Caret 之间的距离更短。插入符号和下一个 Glyphicon 之间的距离更大。 （但它应该能够再次将屏幕尺寸更改为较低的距离）

谁能帮助解决这个问题？ :)

谢谢！

body {          background-color: #EFF3F4;
                color: #6a6c6f;
}

a {             color: #6a6c6f; 
                text-decoration: none;}

a:active {}

a:hover {       color: #6a6c6f; 
                text-decoration: none;}

a:link {}

a:visited {}







    
    
adding-bottom: 0px;                        
                        padding-right: auto;
                        margin-top: 0px;
                        margin-bottom: 20px;
                        position: fixed;
                        top: 50px;
                        right: 0px;
                        left: 0px;
                        z-index: 1030;                        
                        background-color: #ff5b5b; 
                        border: 0px;
}
    
    ul.dropdown {       padding: 12.5px;
                        margin: 0px;
                        float: left;
    }
    li.dropdown {       display: inline-block;
    }
    
    
    a.navi-unten {      display: inline-block;
                        color: #fff;
                        text-decoration: none;                    
    }
    a.navi-unten:hover {color: #6a6c6f;
                        text-decoration: none;
    }
    a.navi-unten:focus {color: #6a6c6f;
                        text-decoration: none;
    }





.main {             min-height: 3000px; 
                    padding: 65px 0px 0px 0px; }

div.jumbotron {     margin-top: 100px;
                    background-color: ; }
 <body>

      

            
        <!-- START: NAVBAR_oben  --> 
                
        
 <nav class="navbar navbar-default navbar-fixed-top">
 
  <div class="container">
  
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>   
      <a class="navbar-brand" href="#"><?= $language['phrases']['site_title']; ?></a>
    </div>
    
    <div class="collapse navbar-collapse" id="myNavbar">
      
      <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span style="font-size:1.25em;" class="glyphicon glyphicon-user"></span> </a></li>
      </ul>
      
    </div>
  </div>
</nav>
        
        <!-- END: NAVBAR_oben -->
               
        <!-- START: NAVBAR_unten -->
        
 <nav class="nav navbar-nav nav-sidebar">
  <div class="container">
     
     <ul class="dropdown">  

<li class="dropdown">
  <a class="navi-unten" id="dLabel" data-toggle="dropdown" href="#"><span style="font-size:1.5em;" class="glyphicon glyphicon-envelope"></span>
                        <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Advertiser</a></li>
    <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Kampagnen</a></li>
    <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Listen</a></li>
    <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Jobs</a></li>
    <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Nodes</a></li>
    
  </ul>
</li>
        
<li class="dropdown">
  <a class="navi-unten" id="dLabel" data-toggle="dropdown" href="#"><span style="font-size:1.5em;" class="glyphicon glyphicon-pencil"></span>
                        <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Konfigurationen</a></li>
    <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Module</a></li>
    <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Seiten</a></li>
    <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Navigation</a></li>
    <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Gruppen</a></li>
    <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Benutzer</a></li>
    <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Sprachen</a></li>
  </ul>
</li> 


</ul>
  </div>
</nav>        
        
            
                
            
                   
             
          
            
    
        
        
        
        <!-- END: NAVBAR_unten -->

        

        <!-- START: CONTENT -->
        
        
        <div class="container">
           
                <div class="jumbotron">
                   <?php create_element_content($language,$system); ?>
                </div>
              
        </div>
        
        <!-- END: CONTENT -->

    </body>

][1]

【问题讨论】：

    标签： twitter-bootstrap list margin distance


    【解决方案1】： 
    give id to the caret span and pull it right in css and give the id to next glyphicon and pull it left in css....i gave them id1 and id2 in css ..you can adjust in css accordingly 




    

    

        body {          background-color: #EFF3F4;
                    color: #6a6c6f;
    }

    a {             color: #6a6c6f; 
                    text-decoration: none;}

    a:active {}

    a:hover {       color: #6a6c6f; 
                    text-decoration: none;}

    a:link {}

    a:visited {}







        
        
    adding-bottom: 0px;                        
                            padding-right: auto;
                            margin-top: 0px;
                            margin-bottom: 20px;
                            position: fixed;
                            top: 50px;
                            right: 0px;
                            left: 0px;
                            z-index: 1030;                        
                            background-color: #ff5b5b; 
                            border: 0px;
    }
        
        ul.dropdown {       padding: 12.5px;
                            margin: 0px;
                            float: left;
        }
        li.dropdown {       display: inline-block;
        }
        
        
        a.navi-unten {      display: inline-block;
                            color: #fff;
                            text-decoration: none;                    
        }
        a.navi-unten:hover {color: #6a6c6f;
                            text-decoration: none;
        }
        a.navi-unten:focus {color: #6a6c6f;
                            text-decoration: none;
        }



 #id1{
margin-right:10px;

}
#id2{
margin-left:10px;
}

    .main {             min-height: 3000px; 
                        padding: 65px 0px 0px 0px; }

    div.jumbotron {     margin-top: 100px;
                        background-color: ; }
    

         <body>

          

                
            <!-- START: NAVBAR_oben  --> 
                    
            
     <nav class="navbar navbar-default navbar-fixed-top">
     
      <div class="container">
      
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>   
          <a class="navbar-brand" href="#"><?= $language['phrases']['site_title']; ?></a>
        </div>
        
        <div class="collapse navbar-collapse" id="myNavbar">
          
          <ul class="nav navbar-nav navbar-right">
              <li><a href="#"><span style="font-size:1.25em;" class="glyphicon glyphicon-user"></span> </a></li>
          </ul>
          
        </div>
      </div>
    </nav>
            
            <!-- END: NAVBAR_oben -->
                   
            <!-- START: NAVBAR_unten -->
            
     <nav class="nav navbar-nav nav-sidebar">
      <div class="container">
         
         <ul class="dropdown">  

    <li class="dropdown">
      <a class="navi-unten" id="dLabel" data-toggle="dropdown" href="#"><span style="font-size:1.5em;" class="glyphicon glyphicon-envelope"></span>
                            <span class="caret" id="id1"></span></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Advertiser</a></li>
        <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Kampagnen</a></li>
        <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Listen</a></li>
        <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Jobs</a></li>
        <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Nodes</a></li>
        
      </ul>
    </li>
            
    <li class="dropdown">
      <a class="navi-unten" id="dLabe1" data-toggle="dropdown" href="#"><span style="font-size:1.5em;" class="glyphicon glyphicon-pencil" id="id2"></span>
                            <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Konfigurationen</a></li>
        <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Module</a></li>
        <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Seiten</a></li>
        <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Navigation</a></li>
        <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Gruppen</a></li>
        <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Benutzer</a></li>
        <li role="presentation"><a class="navi-unten" role="menuitem" tabindex="-1" href="#">Sprachen</a></li>
      </ul>
    </li> 


    </ul>
      </div>
    </nav>        
            
                
                    
                
                       
                 
              
                
        
            
            
            
            <!-- END: NAVBAR_unten -->

            

            <!-- START: CONTENT -->
            
            
            <div class="container">
               
                    <div class="jumbotron">
                       <?php create_element_content($language,$system); ?>
                    </div>
                  
            </div>
            
            <!-- END: CONTENT -->

        </body>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2013-12-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-03-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode