बूटस्ट्रैप 3: सूची-समूह-आइटम में फ़्लोटिंग तत्वों का विस्तार लंबवत स्थान

बूटस्ट्रैप 3 list-group-item में, मेरे पास एक आइकन, कुछ टेक्स्ट और दो आइकन/बटन हैं जो सही फ़्लोट करना चाहिए।बूटस्ट्रैप 3: सूची-समूह-आइटम में फ़्लोटिंग तत्वों का विस्तार लंबवत स्थान

मैं इस कोशिश की:

<a class="list-group-item" ng-click="handleClick()"> 
    <span class="glyphicon glyphicon-file"></span> 
    Some text goes here 
    <button class="btn btn-xs btn-warning pull-right" ng-click="handleButtonClick()"><span class="glyphicon glyphicon-trash"></span></button> 
    <some:custom:span></some:custom:span> 
</a>

यह अच्छा काम करता है, तो परिणाम एक लाइन में फिट बैठता है:

rendering with wide window

यह भी जब खिड़की इतनी पतली है कि वास्तविक पाठ नहीं करता है काम करता है एक पंक्ति में फिट:

the text wrapped, leaving a place for the pull-right spans

हालांकि, खिड़कियों पाठ एक पंक्ति में रहने की अनुमति देता है, लेकिन वहाँ पुल सही फैला के लिए पर्याप्त जगह नहीं है, तो चीजें गड़बड़ हो:

float sticks out below

क्या मैं वास्तव में चाहते हैं है कि pull-right स्पैन एक नई लाइन शुरू करते हैं और सही संरेखित करते हैं, और list-group-item फिट होने के लिए लंबवत रूप से फैले हुए हैं। मैं उसे कैसे प्राप्त कर सकता हूं?

स्रोत

2014-04-04 fefrei

बटन को गठबंधन रखने के लिए उनके चारों ओर एक नया तत्व लपेटें और रैपिंग तत्व को फ़्लोट करें। फिर अपनी ऊंचाई को ठीक करने के लिए .clearfix कक्षा के साथ सूची आइटमों पर float साफ़ करें।

<div class="list-group"> 
    <a href="#" class="list-group-item clearfix"> 
    <span class="glyphicon glyphicon-file"></span> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    <span class="pull-right"> 
     <button class="btn btn-xs btn-info">CCS</button> 
     <button class="btn btn-xs btn-warning"> 
     <span class="glyphicon glyphicon-trash"></span> 
     </button> 
    </span> 
    </a> 
</div>

यहां लाइव उदाहरण देखें: http://jsfiddle.net/cdog/EpG7x/।

हालांकि, एक लिंक के भीतर बटन रखने HTML5 specification from W3C के अनुसार मान्य नहीं है।

a तत्व, चारों ओर पूरे पैराग्राफ, सूची, टेबल, और बहुत आगे है, यहां तक कि पूरे वर्गों लिपटे हो सकता है इतने लंबे समय वहाँ (जैसे बटन या अन्य लिंक) के भीतर कोई इंटरैक्टिव सामग्री है।

इसी प्रकार के परिणाम तालिकाओं के साथ पैनलों का उपयोग करके हासिल किया जा सकता है।

<div class="panel panel-default"> 
    <table class="table table-hover"> 
    <tbody> 
     <tr> 
     <td> 
      <span class="glyphicon glyphicon-file"></span> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
     </td> 
     <td class="text-right text-nowrap"> 
      <button class="btn btn-xs btn-info">CCS</button> 
      <button class="btn btn-xs btn-warning"> 
      <span class="glyphicon glyphicon-trash"></span> 
      </button> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div>

लपेटकर से एक सेल के अंदर सामग्री को रोकने के लिए, आपको .text-nowrap वर्ग (बूटस्ट्रैप v3.2.0 में जोड़ा) का उपयोग कर सकते हैं।

यहां लाइव उदाहरण देखें: http://jsfiddle.net/cdog/6mFDH/।

स्रोत

2014-04-04 19:43:43 cdog

धन्यवाद! मैं पहले संस्करण के साथ गया, लेकिन '''' को' span' के साथ बदल दिया, जिसे इसे कानूनी बनाना चाहिए, और मैन्युअल रूप से ': होवर' प्रभाव जोड़ा गया है (जो बूटस्ट्रैप 'span.list-group-item: hover' पर लागू होता है केवल डिफ़ॉल्ट रूप से)। यह बिल्कुल अपेक्षित काम करता है। क्या आपको कोई स्पष्ट दस्तावेज पता है जिसे मुझे 'clearfix' रास्ता खोजने के लिए पढ़ना चाहिए था? – fefrei

फ़्लोट किए गए तत्व ठीक से मौजूद तत्व की ऊंचाई में नहीं जोड़ते हैं। यहां एक समान परिदृश्य का वर्णन किया गया है: http://css-tricks.com/the-how-and-why-of-clearing-floats/। – cdog

बूटस्ट्रैप 3: सूची-समूह-आइटम में फ़्लोटिंग तत्वों का विस्तार लंबवत स्थान

उत्तर

संबंधित मुद्दे