बूटस्ट्रैप में अजीब सीएसएस प्रभाव। कंटेनर div

Question

के अंदर कई सामग्री divs दिखाते समय अनजाने इंडेंट मैं एक प्रोजेक्ट के लिए बूटस्ट्रैप के रूप में सीएसएस ढांचे के रूप में उपयोग कर रहा हूं और मेरा दोस्त काम कर रहा है (इसलिए डी & डी थीम)। मेरे पास एक पृष्ठ है जहां हम एक विशिष्ट उपयोगकर्ता डी & डी वर्ण प्रदर्शित कर रहे हैं। पृष्ठ पर इन वर्णों को प्रदर्शित करते समय प्रत्येक पंक्ति पर चार होना चाहिए (span4 एक पंक्ति-तरल पदार्थ में)। समस्या यह है कि दूसरी पंक्ति पर एक अजीब इंडेंटेशन शुरू होता है (अटैचमेंट फीड देखें)।

मैं क्रोम में "घटक का निरीक्षण" का उपयोग कर रहा हूं लेकिन मुझे यह नहीं लगता कि यह क्या होता है।

http://jsfiddle.net/sE5en/4/

आशा मैं कुछ हद तक समस्या के बारे में बताया :)

मुख्य "कंटेनर" (अनिवार्य) नीचे चिपकाया जाता है:

<div class="container"><div class="row"> 
    <div class="span12"> 
     <h3 class="mycharacters">My characters</h3> 
     <a class="btn btn-success btn-small pull-right"> 
      <i class="icon-plus-sign icon-white"></i> Add character 
     </a> 
    </div> 
    <div class="span12" id="actor_result"><div class="row-fluid"> 
<div class="span4 well well-small"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://placehold.it/64x64"></a><div class="overflow-media-body media-body"><div class="btn-group pull-right"><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu"><li><a href="actor_edit_owner?id=1"><i class="icon-pencil"></i> Edit 
            </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">Davius</h4><div><i class="icon-heart"></i><strong> Health: </strong>17/20hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong></div><div class="actor-text">Mumblecore bushwick sed, nulla id street art dolore delectus wolf american apparel artisan sriracha. 
Laboris seitan hoodie, freegan brooklyn letterpress adipisicing chambray mixtape id tofu organic butcher small batch. Art party carles readymade messenger bag williamsburg. Irony placeat sustainable, high life cillum yr sed vinyl pork belly messenger bag williamsburg VHS. Occaecat lo-fi readymade gluten-free 3 wolf moon. Ad tofu twee, blog nulla mumblecore gentrify brooklyn odio cliche selvage put a bird on it pork belly chillwave deserunt. Ea assumenda chillwave, keytar velit tumblr pour-over enim VHS mcsweeney's blog.</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div class="actor-text"></div></div></div> 
<div class="span4 well well-small"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle actor" src="images/avatar/actor/leonidas.png"></a><div class="overflow-media-body media-body"><div class="btn-group pull-right"><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu"><li><a href="actor_edit_owner?id=3"><i class="icon-pencil"></i> Edit 
            </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">Awesome Maximus</h4><div><i class="icon-heart"></i><strong> Health: </strong>1/30hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong></div><div class="actor-text">DYYYING! öööääöååå</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div class="actor-text">lol</div></div></div> 
<div class="span4 well well-small"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://placehold.it/64x64"></a><div class="overflow-media-body media-body"><div class="btn-group pull-right"><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu"><li><a href="actor_edit_owner?id=4"><i class="icon-pencil"></i> Edit 
            </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">Master Thief Sven</h4><div><i class="icon-heart"></i><strong> Health: </strong>10/13hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong></div><div class="actor-text">Lurking</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div class="actor-text">He's a backstabber</div></div></div> 
<div class="span4 well well-small"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://placehold.it/64x64"></a><div class="overflow-media-body media-body"><div class="btn-group pull-right"><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu"><li><a href="actor_edit_owner?id=5"><i class="icon-pencil"></i> Edit 
            </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">Giant Frederic</h4><div><i class="icon-heart"></i><strong> Health: </strong>25/27hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong></div><div class="actor-text">Farting</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div class="actor-text">I will cruuuush you!</div></div></div> 
<div class="span4 well well-small"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://placehold.it/64x64"></a><div class="overflow-media-body media-body"><div class="btn-group pull-right"><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu"><li><a href="actor_edit_owner?id=6"><i class="icon-pencil"></i> Edit 
            </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">One eyed idiot</h4><div><i class="icon-heart"></i><strong> Health: </strong>35/35hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong></div><div class="actor-text">Rested</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div class="actor-text">Can't see straight</div></div></div> 
<div class="span4 well well-small"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://placehold.it/64x64"></a><div class="overflow-media-body media-body"><div class="btn-group pull-right"><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu"><li><a href="actor_edit_owner?id=7"><i class="icon-pencil"></i> Edit 
            </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">Pantless bum</h4><div><i class="icon-heart"></i><strong> Health: </strong>5/7hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong> </div><div class="actor-text">Stinks like you wouldn't believe</div><div><i class="icon-edit"> </i><strong> Notes: </strong></div><div class="actor-text">Needs help...</div></div></div> 
</div></div> 
</div> 

Answer 1

कि खरोज तथ्य से आता है कि आप ' प्रति पंक्ति 12 कॉलम की ग्रिड सीमा से अधिक divs के ढेर को फिर से रेखांकित करते हैं, इसलिए 12 कॉलम चिह्न से पहले ग्रिड तत्व प्रति डिज़ाइन इंडेंट किए जाते हैं।

सीएसएस

.row-fluid > .span4:nth-child(4) { 
    margin-left:0; 
} 

: आप प्रति .row-fluid (4x3 = 12) सिर्फ 3 .span4 divs अस्तर या कुछ सीएसएस जादू के साथ कि चौथी ग्रिड तत्व को निशाना बनाने और मार्जिन को हटाने, तो तरह से इस से बचने कर सकते हैं बेशक, nth-child चयनकर्ता पुराने ब्राउज़र (जैसे आईई 7-8) में समर्थित नहीं है, लेकिन यदि आप समर्थन का विस्तार करना चाहते हैं तो आप कुछ jQuery के साथ सीएसएस को प्रतिस्थापित कर सकते हैं।

अपडेट किया गया बेला: http://jsfiddle.net/sE5en/5/show/

Answer 2

खरोज अजीब है, लेकिन उम्मीद नहीं है। यह लाइन 343 पर bootstrap.css में परिभाषित किया गया है:

.row-fluid [class*="span"] { 
    ... 
    margin-left: 2.127659574468085%; 
    *margin-left: 2.074468085106383%; 
    ... 
} 

और लाइन पर 218

[class*="span"] { 
    float: left; 
    min-height: 1px; 
    margin-left: 20px; 
} 

एक पंक्ति में सबसे पहले div लाइन पर मार्जिन अधिरोहित है 355:

.row-fluid [class*="span"]:first-child { 
    margin-left: 0; 
} 

मैं डॉन ऐसा नहीं लगता कि आप क्रॉस-ब्राउज़र संगत तरीके से कई पंक्तियों के माध्यम से पंक्ति सामग्री फैलते समय मार्जिन सेटिंग को ओवरराइड कर सकते हैं, इसलिए आपको प्रत्येक 3 वर्ण divs को एक अलग पंक्ति में रखना चाहिए। मैंने आपके fiddle को अपडेट किया है ताकि आप अंतर देख सकें।