बूटस्ट्रैप नेविबर डिवाइडर को समान रूप से

Question

बनाएं नेविगेशन बार में लंबवत डिवाइडर को समान रूप से कैसे बाहर रखा जाए?

यहां HTML और CSS है जिसका मैं वर्तमान में उपयोग कर रहा हूं।

HTML:

<li class="divider-vertical"><a href = "#">Contact Us</a></li> 

सीएसएस:

.divider-vertical { 
height: 50px; 
margin: 0 9px; 
border-left: 1px solid #F2F2F2; 
border-right: 1px solid #FFF; 
} 

नेवबार कोड:

<nav class="navbar navbar-default navbar-static-top" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse navHeaderCollapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href = "#">Home</a></li> 
      <li class="divider-vertical"><a href = "#">About</a></li> 
      <li class="divider-vertical"><a href = "#">Jobs</a></li> 
      <li class="divider-vertical"><a href = "#">Contact Us</a></li> 
      <li class="divider-vertical"><a href = "#">Resources</a></li> 
      </ul> 
     </div> 
    </nav> 

Answer 1

वहाँ प्रभाव आप के बाद कर रहे हैं प्राप्त करने के लिए कई तरीके हैं। यहां एक त्वरित समाधान है जो आपकी समस्या को हल करेगा और आपको आवश्यक परिणाम देगा। margin का उपयोग

शैली अपने .li तत्वों HTML से अपने .divider-vertical वर्ग निकालें

1. ,:

   .divider-vertical { 
   height: 50px; 
   margin: 0 0 0 9px; 
   padding: 0 0 0 9px; 
   border-left: 1px solid red; 
   } 
   

   एक बेहतर दृष्टिकोण है जो आप एक छोटे से एचटीएमएल लेखन की बचत होगी निम्नलिखित की तरह कुछ करने के लिए किया जाएगा और padding आपके border के समान ही - इस मामले में सही

2. हम कुछ सीएसएस एट को हटाने के लिए छद्म वर्ग :last-child का उपयोग करेंगे पिछले मेनू आइटम से ributes

li { 
 
    border-right: 1px solid red; 
 
    margin: 0 9px 0 0; 
 
    padding: 0 9px 0 0; 
 
} 
 

 
li:last-child { 
 
    border-right: none; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default navbar-static-top" role="navigation"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href = "#">Home</a></li> 
 
      <li><a href = "#">About</a></li> 
 
      <li><a href = "#">Jobs</a></li> 
 
      <li><a href = "#">Resources</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav>

Answer 2

इस पर एक नजर डालें। मैंने divider-vertical कक्षा को Home<li> टैग में स्टाइल देने के लिए जोड़ा।

JSFiddle

एचटीएमएल

<div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav"> 
     <li class="divider-vertical"><a href = "#">Home</a></li> 
     <li class="divider-vertical"><a href = "#">About</a></li> 
     <li class="divider-vertical"><a href = "#">Jobs</a></li> 
     <li class="divider-vertical"><a href = "#">Resources</a></li> 
     </ul> 
    </div> 
</nav> 

सीएसएस

.divider-vertical { 
    height: 50px; 
    width:100px; 
    margin: auto; 
    border-left: 1px solid black; 
    border-right: 1px solid red; 
    text-align:center; 
} 

Answer 3

आप निम्न करने के लिए अपने सीएसएस बदलने की जरूरत:

.divider-vertical { 
    height: 50px; 
    border-left: 1px solid #F2F2F2; 
    border-right: 1px solid #FFF; 
} 

आप छोड़ दिया और सही करने के लिए 9px सेट पर मार्जिन था।

आप अतिरिक्त जगह उपयोग करना चाहते हैं:

padding: 0 9px; 

बजाय

। here एक कामकाजी उदाहरण है, लेकिन इसे देखने के लिए आपको पैनल को खींचने की आवश्यकता होगी क्योंकि बूटस्ट्रैप jsfiddle की डिफ़ॉल्ट चौड़ाई पर नेविचॉन में आपकी नौसेना बना रहा है।