3 कॉलम ग्रिड navbar बूटस्ट्रैप

Question

मैं 3 कॉलम ग्रिड नेविबार बनाने की कोशिश कर रहा हूं, मैंने बूटस्ट्रैप में बनाए गए कॉलम का उपयोग करने का प्रयास किया है लेकिन कोई सफलता नहीं है।

पहले कॉलम 100px की एक अधिकतम-चौड़ाई की जरूरत है, लेकिन तरल हो सकता है यदि ब्राउज़र का आकार बदल दिया

दूसरे स्तंभ को भरने 1 और 2 स्तंभ के बीच की खाई होने की जरूरत है और है यदि ब्राउजर का आकार बदलता है तो प्रतिक्रिया देने के लिए तरल पदार्थ भी।

तीसरे स्तंभ 200px की एक अधिकतम-चौड़ाई की जरूरत है, लेकिन तरल हो सकता है यदि ब्राउज़र का आकार बदल दिया है

मैं एक दूसरे के साथ इनलाइन कॉलम प्राप्त करने में असमर्थ हूँ, यहाँ मेरी फिडल: http://jsfiddle.net/Xsfvw/7/

<!--Bootstrap Approach--> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-8 col-sm-3 border">Logo</div> 
     <div class="col-xs-2 col-sm-6 border">Nav</div> 
     <div class="col-xs-2 col-sm-3 border">Right</div> 
    </div> 
</div> 
<!--Standard CSS Approach--> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="nalogo">Logo</div> 
     <div class="nanav">Nav</div> 
     <div class="naright">right</div> 
    </div> 
</div> 

सीएसएस:

:

.border { 
    border: 2px solid #ff0000; 
    z-index: 1020; 
    height: 50px; 
    margin-bottom: 30px; 
} 
.nalogo { 
    width:100px; 
    height:50px; 
    background-color:#ff0000; 
    border: 1px solid #000; 
    float: left; 
} 
.nanav { 
    width:100%; 
    height:50px; 
    background-color:#00ff00; 
    border: 1px solid #000; 
    margin:0 auto !important; 
} 
.naright { 
    display: inline-block; 
    width:200px; 
    height:50px; 
    background-color:#0000ff; 
    border: 1px solid #000; 
    float: right; 
} 

यहाँ क्या मैं दोहराने की कोशिश कर रहा हूँ है

Answer 1

768px से अधिक के लिए हैलो। आप this जैसे कुछ का उपयोग कर सकते हैं।

.container-fluid { 
    width: 100%; 
    background: #222; 
} 
.row { 
    width: 100%; 
} 
.row > div { 
    color: #FFF; 
} 
.nalogo { 
    float: left; 
    width: 150px; 
    background: red; 
} 
.nanav { 
} 
.naright { 
    float: right; 
    width: 200px; 
    background: blue; 
} 

यह तरल केंद्र को पूरा करने के लिए सरल फ्लोट का उपयोग करता है। लेकिन जब छोटी स्क्रीन पर आपको तत्वों के चारों ओर स्थानांतरित करने की आवश्यकता होती है, तो शायद मेनू के लिए एक अच्छा विचार होगा, इसलिए जब स्क्रीन 768 से छोटी हो तो यह दूसरी ओर स्विच हो जाती है।

Answer 2

बूटस्ट्रैप छिपाने का समर्थन करता है और स्क्रीन की चौड़ाई के आधार पर ग्रिड टाइल्स दिखाता है। अपनी समस्या का समाधान करने के तरीके के रूप में visible-*-block का उपयोग करने पर विचार करें।

http://jsfiddle.net/Xsfvw/10/

यह निम्न डिजाइन पैटर्न का उपयोग करता:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-2 visible-xs-block border">Nav</div> 
     <div class="col-xs-8 visible-xs-block border">Logo XS</div> 
     <div class="col-xs-2 visible-xs-block border">Right</div> 
     <div class="col-sm-3 visible-sm-block visible-md-block border">Logo SM</div> 
     <div class="col-sm-6 visible-sm-block visible-md-block border">Nav </div> 
     <div class="col-sm-3 visible-sm-block visible-md-block border">Right</div> 
    </div> 
</div>