बूटस्ट्रैप के साथ निश्चित चौड़ाई के बटन

Question

क्या बूटस्ट्रैप निश्चित चौड़ाई बटन का समर्थन करता है? वर्तमान में अगर मेरे पास 2 बटन हैं, तो "सहेजें" और "डाउनलोड करें", सामग्री के आधार पर बटन का आकार बदलता है।

इसके अलावा बूटस्ट्रैप का विस्तार करने का सही तरीका क्या है?

Comments

निश्चित चौड़ाई से क्या आपका मतलब है कि यह उसके अंदर की सामग्री के साथ नहीं बढ़ता है? बटन केवल पाठ द्वारा सीमित हैं।

— एंड्रेस इलिच

@AndresIlich वर्तमान में अगर मेरे पास 2 बटन हैं "सहेजें" और "डाउनलोड" सामग्री के आधार पर बटन का आकार बदलता है

— aWebDeveloper

तो आप चाहते हैं कि एक ही चौड़ाई वाले दो बटन सही हों?

— एंड्रेस इलिच

stackoverflow.com/questions/10459808/…

— trante

Answer 1

आप .btn-blockबटन पर वर्ग का उपयोग भी कर सकते हैं , ताकि यह माता-पिता की चौड़ाई तक फैल जाए।

यदि पैरेंट एक निश्चित चौड़ाई वाला तत्व है तो बटन सभी चौड़ाई लेने के लिए विस्तारित होगा। आप कंटेनर पर मौजूदा मार्कअप लागू कर सकते हैं ताकि यह सुनिश्चित किया जा सके कि फिक्स्ड / फ्लुइड बटन केवल आवश्यक स्थान ही लें।

<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="span2">
  <p><button class="btn btn-primary btn-block">Save</button></p>
  <p><button class="btn btn-success btn-block">Download</button></p>
</div>

Answer 2

ऐसा करने के लिए आप एक ऐसी चौड़ाई के साथ आ सकते हैं जो आपको लगता है कि दोनों बटन के लिए ठीक है और फिर चौड़ाई के साथ एक कस्टम वर्ग बनाएं और इसे अपने बटनों में जोड़ें जैसे:

सीएसएस

.custom {
    width: 78px !important;
}

मैं तब इस वर्ग का उपयोग कर सकता हूं और इसे इस तरह बटन पर जोड़ सकता हूं:

<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>

डेमो: http://jsfiddle.net/yNsxU/

आप अपने द्वारा बनाई गई उस कस्टम क्लास को ले सकते हैं और उसे अपनी स्टाइलशीट के अंदर रख सकते हैं, जिसे आप बूटस्ट्रैप स्टाइलशीट के बाद लोड करते हैं। हम ऐसा इसलिए करते हैं क्योंकि आपके द्वारा बूटस्ट्रैप स्टाइलशीट के अंदर किए गए किसी भी परिवर्तन को फ्रेमवर्क अपडेट करते समय गलती से खो सकता है, हम यह भी चाहते हैं कि आपके परिवर्तन डिफ़ॉल्ट मानों पर पूर्वता ले लें।

Comments

emपिक्सल के बजाय इकाइयों का उपयोग करें , वे आपको पात्रों की लंबाई द्वारा चौड़ाई निर्धारित करने में मदद करते हैं

— svarog

@DanDascalescu ~ 2 साल बाद मैं असहमत हूं। लेखक पूरे माता-पिता को भरने के लिए बटन का विस्तार करने के बाद नहीं हो सकता है, एक बटन के लिए आधा पृष्ठ हो सकता है जो कहता है कि 'सहेजें'। मैं कुछ इस तरह की सलाह दूंगा लेकिन जरूरत पड़ने पर मीडिया के सवालों के साथ। हमेशा सबसे बड़े बटन के रूप में उन्हें बड़ा बनाने के लिए जावास्क्रिप्ट है, यह आम तौर पर एक रास्ता है जिससे मैं दूर रहता हूं

— याकूब

Answer 3

यदि आप अपने बटनों को "btn-group" वर्ग के साथ div के अंदर रखते हैं तो अंदर के बटन सबसे बड़े बटन के समान आकार में फैल जाएंगे।

उदाहरण के लिए:

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div> 

बूटस्ट्रैप बटन समूह

Comments

@ एंटोज़ो: क्या आप इस पर विस्तार कर सकते हैं कि यह काम क्यों नहीं करता मैंने पाया कि वास्तव में यह करता है - उदाहरण के लिए ऊर्ध्वाधर भिन्नता देखें ।

— Dan Dascalescu

मैं समान कार्यक्षमता हासिल करने की कोशिश कर रहा हूं, और ऊपर वाला कोड मेरे लिए भी काम नहीं करता है। @DanDascalescu क्या आपको कोई दूसरा तरीका मिला?

— जिलेटिनफॉक्स

बटन को काम करने के लिए वर्ग बीटीएन-ब्लॉक का होना चाहिए, कम से कम मेरे लिए।

— गेब्रियल

नहीं, यह काम नहीं करता है - बटन समान आकार के नहीं हैं।

— एंटोनियोसस

मैंने एक अतिरिक्त मार्जिन-शेष जोड़ा क्योंकि मैं चाहता था कि बटन अलग हो जाएं। पूरी तरह से काम किया। सभी एक ही चौड़ाई।

— टॉमस गोंजालेज

Answer 4

अपने बटनों के लिए, आप उन विशेष वर्गों के बटन के लिए एक निर्दिष्ट न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई के साथ एक और CSS चयनकर्ता बना सकते हैं। तो अगर आपका बटन है

<button class="save_button">Save</button>

अपनी बूटस्ट्रैप सीएसएस फ़ाइल में आप कुछ ऐसा बना सकते हैं

.save_button {
    min-width: 80px;
    max-width: 80px;
}

इस तरह यह हमेशा उत्तरदायी डिज़ाइन होने पर भी 80px रहना चाहिए।

जहाँ तक बूटस्ट्रैप का विस्तार करने का सही तरीका है, इस धागे पर एक नज़र डालें:

बूटस्ट्रैप का विस्तार

Answer 5

बीएस 4 के साथ, आप साइजिंग का उपयोग भी कर सकते हैं , और डब्ल्यू -100 लागू कर सकते हैं ताकि बटन मूल कंटेनर की पूरी चौड़ाई पर कब्जा कर सके।

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  Using btn-block
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary btn-block">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

<p>
  Using w-100
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary w-100">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

Answer 6

विस्तार @ kravits88 उत्तर:

यह पूरी चौड़ाई फिट करने के लिए बटन को फैलाएगा:

<div className="btn-group-justified">
<div className="btn-group">
  <button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
  <button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>

Comments

यह बूटस्ट्रैप 3.3 का सही उत्तर है। btn-group-justifiedप्रमुख वर्ग है। यहाँ दस्तावेज़ देखें: getbootstrap.com/docs/3.3/compenders/…

— CXJ

Answer 7

btn-group-justified और btn-group केवल स्टैटिक कंटेंट के लिए काम करते हैं लेकिन डायनामिक रूप से बनाए गए बटन पर नहीं, और css में बटन के साथ फिक्स्ड व्यावहारिक नहीं है क्योंकि यह एक ही चौड़ाई पर रहता है यहां तक ​​कि सभी कंटेंट कम होते हैं।

मेरा समाधान: बटन के समूह के लिए एक ही वर्ग रखो फिर उन सभी को लूप करें, सबसे लंबे बटन की चौड़ाई प्राप्त करें और इसे सभी पर लागू करें

var bwidth=0
$("button.btnGroup").each(function(i,v){
    if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);

Answer 8

यदि मूल कंटेनर उत्तरदायी है तो एक ब्लॉक चौड़ाई बटन आसानी से उत्तरदायी बटन बन सकता है। मुझे लगता है कि एक निश्चित चौड़ाई और अधिक विस्तृत चयनकर्ता पथ के संयोजन का उपयोग करने के बजाय महत्वपूर्ण और क्योंकि:

1) इसका हैक नहीं है (न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई को एक समान रखना हालांकि हैक योग्य है)

2) महत्वपूर्ण टैग का उपयोग नहीं करता है जो बुरा अभ्यास है

3) चौड़ाई का उपयोग करता है तो यह बहुत ही पठनीय होगा और जो कोई भी यह समझता है कि CSS में कैस्केडिंग कैसे काम करता है वह क्या देख रहा होगा (शायद इसके लिए CSS टिप्पणी छोड़ दें?)

4) बढ़ी हुई सटीकता के लिए अपने चयनकर्ताओं को अपने लक्षित नोड पर लागू करें

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}

Answer 9

बस उसी की जरूरत पर आया था और निश्चित चौड़ाई को परिभाषित करने के साथ नहीं था।

तो यह jquery के साथ किया:

    var max = Math.max ($("#share_cancel").width (), $("#share_commit").width ());
    $("#share_cancel").width (max);
    $("#share_commit").width (max); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>
    <button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>

Answer 10

अपनी समस्या के समाधान के लिए सबसे अच्छा तरीका है वांछित स्तंभ चौड़ाई के साथ बटन ब्लॉक बीटीएन-ब्लॉक का उपयोग करना ।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="col-md-12">
      <button class="btn btn-primary btn-block">Save</button>
    </div>
    <div class="col-md-12">
        <button class="btn btn-success btn-block">Download</button>
    </div>

Answer 11

यहां मुझे बटन-समूह तत्व में बटन की तुलना करके एक समाधान मिला। सरल समाधान यह है कि सबसे बड़ी चौड़ाई के साथ एक को प्राप्त करें और चौड़ाई को अन्य बटन पर सेट करें। इसलिए उनकी एक समान चौड़ाई हो सकती है।

    function EqualizeButtons(parentElementId) {

    var longest = 0; 
    var element = $(parentElementId);

    element.find(".btn:not(.button-controlled)").each(function () {
        $(this).addClass('button-controlled');
        var width = $(this).width();
        if (longest < width) longest = width;

    }).promise().done(function () {
        $('.button-controlled').width(longest);
    });
}

इसने एक जादू की तरह काम किया।

Answer 12

यह एक मूर्खतापूर्ण समाधान हो सकता है, लेकिन मैं इस समस्या का समाधान ढूंढ रहा था और आलसी हो गया।

वैसे भी, इनपुट क्लास = "बीटीएन ..." का उपयोग करके ... बटन के बजाय और स्पेस = मूल्य के साथ पैडिंग करें ताकि वे सभी समान चौड़ाई के साथ अच्छी तरह से काम करें।

जैसे:

<input type="submit" class="btn btn-primary" value="   Calculate   "/>    
<input type="reset" class="btn btn-primary"value="     Reset       "/>

मैं लंबे समय से बूटस्ट्रैप का उपयोग नहीं कर रहा हूं, और शायद इस दृष्टिकोण का उपयोग न करने का एक अच्छा कारण है, लेकिन मुझे लगा कि मैं अच्छी तरह से साझा कर सकता हूं

Comments

यदि आप <button>टैग का उपयोग करते हैं  , तो आपको उपयोग करने की आवश्यकता है , उदाहरण के लिए <button type="button" class="btn btn-default">&nbsp;Edit&nbsp;</button>:।

— एंडी तजहोनो

यह मेरे मामले <a class="btn btn-default btn-sm" href="read.php?id='.$row['id'].'"> संपादित </a> में काम नहीं होता

— मीना गेब्रियल