बटन गलत स्थिति के साथ बूटस्ट्रैप 3 पैनल हेडर

117

मैं बूटस्ट्रैप 3 का उपयोग कर रहा हूं और मैं टॉप-राइट कॉर्नर पर, पैनल हेडर में कुछ बटन जोड़ना चाहूंगा। जब उन्हें जोड़ने की कोशिश की जा रही है, तो वे शीर्षक बेसलाइन के नीचे दिखाए गए हैं।

कोड: http://bootply.com/82631

गायब सीएसएस मुझे शीर्षक, पैनल शीर्षक, या बटन में या तो जोड़ना चाहिए?

css twitter-bootstrap twitter-bootstrap-3

— देदे
स्रोत

175

मैं clearfixकक्षा के <div>साथ panel-headingकक्षा को जोड़कर शुरू करूंगा । फिर, टैग में panel-titleऔर दोनों pull-leftको जोड़ें H4। फिर, आवश्यकतानुसार जोड़ें padding-top।

यहाँ पूरा कोड है:

<div class="panel panel-default">
    <div class="panel-heading clearfix">
      <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
      <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
      </div>
    </div>
    ...
</div>

http://bootply.com/98827

— OregonJeff
स्रोत

यह काम करता है, केवल समस्या यह है कि पैनल हैडर को div के शीर्ष पर ले जाया जाता है और बीटीएन-समूह लंबवत संरेखित करता है

— Nuno Furtado

9

या बस को दूर .panel-titleसे <h4>और आप गद्दी जरूरत नहीं होगी।

— नोव

153

मैं यहाँ खेल के लिए थोड़ा लेट हो गया हूँ, लेकिन साधारण उत्तर H4 AFTER बटन बटन को स्थानांतरित करना है। तैरते समय यह एक सामान्य मुद्दा है, हमेशा आपकी फ़्लोट्स को बाकी सामग्रियों से पहले परिभाषित किया जाता है या आपके पास उस अतिरिक्त लाइन-ब्रेक समस्या होगी।

<div class="panel-heading">
    <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
    <h4>Panel header</h4>
</div>

यहां मुद्दा यह है कि जब आपके फ्लोट्स को अन्य मदों के बाद परिभाषित किया जाता है, तो फ्लोट का शीर्ष तत्व के अंतिम पंक्ति-स्थिति पर शुरू होगा। इसलिए, यदि पिछला आइटम लाइन 3 पर जाता है, तो आपका फ्लोट लाइन 3 पर भी शुरू होगा।

फ्लोट को सूची के शीर्ष पर ले जाने से समस्या समाप्त हो जाती है क्योंकि इसे नीचे धकेलने के लिए कोई पिछले तत्व नहीं हैं और फ्लोट के बाद कुछ भी शीर्ष रेखा पर प्रदान किया जाएगा (यह मानते हुए कि सभी वस्तुओं के लिए लाइन पर कमरा है)

सही और गलत क्रम और प्रभावों का उदाहरण: http://www.bootply.com/HkDlNIKv9g

— getsaf
स्रोत

यदि आपको h4 आकार का उपयोग पसंद नहीं है तो <h4> <small> पैनल हैडर </ small> </ h4>

— लूसियानो मार्क्वेटो

मैं यह पता नहीं लगा सकता कि मेरा बटन पैनल-हेडिंग के अंदर फिट क्यों नहीं है। बटन को पैनल-हेडिंग के पेडिंग द्वारा नीचे धकेल दिया जाता है और पैनल-हेडिंग की ऊंचाई नहीं बढ़ाता है। मैं क्या गलत कर रहा हूं? (संपादित करें: जाहिरा तौर पर यह एक वर्ग को h4 में जोड़ने के कारण था ... लेकिन अभी भी हेडिंग बहुत लंबी है।)

— Nate

1

मुझे पैनल-हेडिंग में क्लियरफिक्स जोड़ना था और उपरोक्त उत्तर की तरह पैडिंग जोड़ना था। क्या आप एक कार्य नमूना / डेमो बना सकते हैं?

— नट

2

नैट, यहाँ सही बनाम गलत ऑर्डरिंग का एक नमूना है। bootply.com/HkDlNIKv9g

— getaf

1

मुझे लगता है कि btn-xs के साथ वर्ग btn-sm को बदलना चाहिए। यह बेहतर है

— इलगाला

40

मूल तत्व को खाली करने के लिए आपको "क्लियरफ़िक्स" लागू करना चाहिए। अगली बात, हेडर शीर्षक के लिए h4, हेडर के पार सभी तरह का विस्तार करें, इसलिए आपके द्वारा क्लीयरफिक्स लागू करने के बाद, यह चाइल्ड एलिमेंट को नीचे धकेल देगा, जिससे हेडर डिव का बड़ा हाइट होगा।

यहां एक फ़िक्स है, बस इसे अपने कोड से बदलें।

  <div class="panel-heading clearfix">
     <b>Panel header</b>
       <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
      </div>
   </div>

12/22/2015 को संपादित - जोड़ा गया

— andre3wap
स्रोत

3

अगर आप क्लियरफिक्स क्लास को पैनल-हेडिंग में जोड़ने के बजाय एक और खाली डिव को जोड़ने के लिए काम करना चाहिए

— escapedcat

10

मैंने बटन समूह को शीर्षक के अंदर रखा, और फिर नीचे के लिए एक उपसर्ग जोड़ा।

<div class="panel-heading">
  <h4 class="panel-title">
    Panel header
    <div class="btn-group pull-right">
      <a href="#" class="btn btn-default btn-sm">## Lock</a>
      <a href="#" class="btn btn-default btn-sm">## Delete</a>
      <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
  </h4>
  <div class="clearfix"></div>
</div>

— जोनाथन
स्रोत

1

अधिक सुरुचिपूर्ण: <div class = "पैनल-हेडिंग

— क्लियरफिक्स

8

इस तरह btn-groupअंदर डालने की कोशिश करो H4।।

<div class="panel-heading">
    <h4>Panel header
    <span class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </span>
    </h4>
</div>

http://bootply.com/lpXoMPup2d

— Zim
स्रोत

नहीं, यह "अच्छा अभ्यास" नहीं है, लेकिन इसने मूल प्रश्न का उत्तर दिया। मैं सर्वश्रेष्ठ अभ्यास के अनुसार उत्तर को अपडेट करता हूं।

— ज़िम

6

आप सही हैं। के साथ <b>title</b>यह ठीक लग रहा है, लेकिन मैं उपयोग करना चाहते हैं <h4>।

मैंने <h4 style="display: inline;">काम करने के लिए इसे रखा है ।

अब, मुझे केवल कुछ लंबवत संरेखित करने की आवश्यकता है।

— देदे
स्रोत

1

inline-blockबेहतर है।

— Dede

6

इस मामले में आपको .clearfixफ्लोटेड तत्वों के साथ कंटेनर के अंत में जोड़ना चाहिए ।

<div class="panel-heading">
    <h4>Panel header</h4>
    <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
    <span class="clearfix"></span>
</div>

http://www.bootply.com/NCXkOtIkD6

— sargonpiraev
स्रोत

1

मैंने .panel- हेडिंग पर एक अतिरिक्त कक्षा का उपयोग करते हुए पाया है।

<div class="panel-heading contains-buttons">
   <h3 class="panel-title">Panel Title</h3>
   <a class="btn btn-sm btn-success pull-right" href="something.html"><i class="fa fa-plus"></i> Create</a>
</div>

और फिर इस कम कोड का उपयोग कर:

.panel-heading.contains-buttons {
    .clearfix;
    .panel-title {
        .pull-left;
        padding-top:5px;
    }
    .btn {
        .pull-right;
    }
}

— जॉन जॉयस
स्रोत

0

h4तत्व एक ब्लॉक के रूप में प्रदर्शित किया जाता है। इसमें एक बॉर्डर जोड़ें और आप देखेंगे कि क्या चल रहा है। यदि आप इसके दाईं ओर कुछ तैरना चाहते हैं, तो आपके पास कई विकल्प हैं:

ब्लॉक (h4) तत्व से पहले मंगाई गई वस्तुओं को रखें ।
H4 तत्व को भी फ्लोट करें।
H4 तत्व इनलाइन प्रदर्शित करें।

किसी भी स्थिति में, आपको clearfixअपने बटनों के लिए सही पैडिंग प्राप्त करने के लिए कक्षा को कंटेनर तत्व में जोड़ना चाहिए ।

तुम भी panel-titleवर्ग जोड़ने के लिए, या h4 तत्व पर पैडिंग समायोजित कर सकते हैं।

— mrdeus
स्रोत

0

या यह? पंक्ति वर्ग का उपयोग करके

  <div class="row"> 
  <div class="  col-lg-2  col-md-2 col-sm-2 col-xs-2">
     <h4>Panel header</h4>
  </div>
 <div class="  col-lg-10  col-md-10 col-sm-10 col-xs-10 ">
    <div class="btn-group  pull-right">
       <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
     </div>
  </div>
</div>

— कानित पी।
स्रोत