css - Bootstrap2 Navbar और नीचे पंक्ति के बीच में रहस्यमय सफेद जगह




twitter-bootstrap whitespace (2)

मैं Navbar के नीचे तुरंत एक छवि के साथ एक Navbar प्रदर्शित करने के लिए बूटस्ट्रैप के Navbar और Bootsrap ग्रिड का उपयोग कर रहा हूँ। हालांकि, किसी कारण से इस नवबार और छवि के बीच सफेद जगह है। जब मैं व्हाइटस्पेस के स्थान की जांच करने के लिए फायरबग का उपयोग करता हूं, ऐसा लगता है कि नवबार इसके अंदर के भीतर शीर्ष-गठबंधन है। मैंने सीएसएस का उपयोग करके एनवीबार को नीचे-संरेखित करने के लिए इसे ठीक करने का प्रयास किया है, इसका कोई फायदा नहीं हुआ है।

मैं इस सफेद जगह को कैसे खत्म कर सकता हूं?

धन्यवाद!

<!-- Top Navigation Bar -->
<div class="row" id="rowTopLinkNavBar">
    <div class="span6 offset3" id="divTopLinkNavBar">
        <div class="navbar" id="topLinkNavBar">
            <div class="navbar-inner" style="font-size: 16px;">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="divider"><a href="#">PROJECTS</a></li>
                    <li class="divider"><a href="#">ABOUT US</a></li>
                    <li class="divider"><a href="#">THE TEAM</a></li>
                    <li class="divider"><a href="#">EVENTS</a></li>
                    <li class="divider"><a href="#">MEETINGS</a></li>
                    <li><a href="#">RESOURCES</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--Background Image-->
<div class="row" id="rowBackgroundImg">
    <div class="span6 offset3" id="backgroundImg">
    <!-- background image is set in CSS -->
    </div>
</div>

सीएसएस का उपयोग करके इस मुद्दे को ठीक करने के लिए मेरा बेताब प्रयास यहां दिया गया है:

#backgroundImg
{
    color: #ff0000;
    background-color: #000000;
    /*width: 709px;
    height: 553px;*/
    background: url('../images/someImage.jpg') no-repeat;
    background-size: 100%;
    height: 700px;
    border-radius: 0px;
    background-position: center;
    vertical-align: top;
    background-position: top;
}



#divTopLinkNavBar
{
    vertical-align: bottom;
}

#topLinkNavBar
{
    padding-bottom: 0px;
}
#rowBackgroundImg
{
    padding-top: 0px;
}

.navbar
{
    vertical-align: bottom;
}

आप margin-bottom: 20px को ओवरराइड करना चाह सकते हैं margin-bottom: 20px से 20 navbar :

.navbar {
    margin-bottom: 0;
}

ऐसा कुछ: http://jsfiddle.net/q4M2G/ ( !important है बस बूटस्ट्रैप के सीडीएन संस्करण की शैली को ओवरराइड करने के लिए मैं jsfiddle में उपयोग कर रहा हूं लेकिन अगर आपको अपनी शैली सही ढंग से उपयोग करने की आवश्यकता नहीं है बूटस्ट्रैप शैलियों को ओवरराइड करता है)


आप कक्षाएं क्यों डालते हैं: span12 offset3 ?

बूटस्ट्रैप में 12 कॉलम डिफ़ॉल्ट हैं। इसलिए यदि आपने नहीं बदला है तो इसे डालने का प्रयास करें:

span9 offset3 या बस span12





removing-whitespace