बटन बनाने से पूरी चौड़ाई जाती है?

Question

मुझे कॉलम की पूरी चौड़ाई लेने के लिए एक बटन चाहिए, लेकिन कठिनाइयाँ ...

<div class="span9 btn-block">
    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>

मैं कॉलम के रूप में बटन को कैसे चौड़ा करूं?

Comments

क्या कॉलम? सीएसएस कहां है?

— JJJ

इसलिए मैं ट्विटर-बूटस्ट्रैप

— user1438003

क्या आपने कोशिश की है style="width:100%"? या कि अपनी कक्षाओं में एक डाल?

— ली टेलर

शायद इसलिए कि इसमें कुछ मार्जिन है या कॉलम में कुछ पैडिंग है।

— ओहद

btn-blockवर्ग मेरे लिए काम करता BS3 में आपकी अपेक्षा के अनुरूप

— fguillen

Answer 1

बूटस्ट्रैप v3 और v4

btn-blockअपने बटन / तत्व पर कक्षा का उपयोग करें

बूटस्ट्रैप v2

input-block-levelअपने बटन / तत्व पर कक्षा का उपयोग करें

Comments

बटन समूहों के लिए आप जोड़ने की आवश्यकता होगी btn-blockकरने के लिए btn-groupके रूप में अच्छी तरह से आवरण।

— जेसी

बूटस्ट्रैप V3 और "बीटीएन-ब्लॉक" के साथ परीक्षण किया गया

— बौद्ध अलविस

मैं उसी का उपयोग कर रहा हूं, लेकिन <div class = "btn-group"> <बटन id = "btnSearch" वर्ग = "btn-block"> खोज </ बटन> </ div>

— समरा

चीयर्स दोस्त! इसका उत्तर होना चाहिए

— निकोलस

Answer 2

बूटस्ट्रैप पूर्वनिर्धारित वर्ग का उपयोग क्यों नहीं input-block-levelकरता है जो नौकरी करता है?

<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 -->
<a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 -->

<!-- And let's join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>

नियंत्रण आकार अनुभाग में यहां और जानें ।

Comments

@fguillen अब बीएस का उपयोग नहीं कर रहा है लेकिन form-controlक्लास का प्रयास करें यह नमूने में चीजों को 100% चौड़ा करने के लिए प्रकट होता है।

— कोडएग्री

@CodeAngry बस जिज्ञासु, आप कैसे बीएस का उपयोग नहीं कर रहे हैं (संभव कोड क्रोध के अलावा?)

— । किलिआन लिंडबर्ग

@ कार्ल लिंडबर्ग मैंने अपना रोल किया! बीएस एक त्वरित बदलाव के लिए अच्छा है लेकिन ... यह बाहर खड़ा नहीं होता है।

— कोडएन्ज़्री

@CodeAngry, यह शांत है कि आपने अपनी रूपरेखा तैयार की है - लेकिन थीम-रोलर का उपयोग करने के लिए यह इसके लायक हो सकता है - किसी भी तरह, अपनी खुद की चीज़ पर सहारा!

— कोड़ी

Bs4 के रूप में, @Layke का उत्तर आज तक अधिक है और इसमें bs 2, 3 और 4 शामिल हैं। ऊपर दिए गए विकल्प में से bs4 पर मेरे लिए कुछ भी उपयोगी नहीं था। इस पर बात करने के लिए माफी माँगता हूँ, लेकिन स्वीकार किए जाते हैं जवाब एक अच्छा विचार नहीं है और यह एक पदावनत प्रतीत होता है।

— JL Peyret

Answer 3

मैंने बस इसका उपयोग किया है:

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>

Comments

यह btn-lg के साथ करने का तरीका है। प्रपत्र-नियंत्रण काम नहीं करता है।

— मार्क स्वार्डस्ट्रॉम

Answer 4

बूटस्ट्रैप 4.1+

उपयोग col-12, btn-block, w-100याform-control

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success col-12">
             class="col-12"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>
     </div>
</div>

Answer 5

उपयोग

<div class="btn-group btn-group-justified">
  ...
</div>

लेकिन यह केवल <a> तत्वों और नहीं <बटन> तत्वों के लिए काम करता है।

देखें: http://getbootstrap.com/compenders/#btn-groups-justified

Comments

सवाल बटन के बारे में नहीं था btn-group, btn-blockलेके द्वारा कक्षा के संदर्भ में अधिक स्वीकार्य प्रतिक्रिया है ।

— हंस

Answer 6

आपको सीएसएस शीट में इन शैलियों को जोड़ना चाहिए

div .no-padding {
  padding:0;
}

button .full-width{
  width:100%;
  //display:block; //only if you're having issues
}

फिर वर्गों को अपने कोड में जोड़ें

<div class="span9 btn-block no-padding">
    <button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>

मैंने इसका परीक्षण नहीं किया है और मैं 100% सुनिश्चित नहीं हूं कि आप क्या चाहते हैं, लेकिन मुझे लगता है कि यह आपको करीब पहुंचा देगा।

Comments

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

— केनी बानिया

btn-blockवह विशेषता है जिसने मुझे बचाया है! क्या मेरे बाल खींच रहे थे .. अब मैं वापस जाता हूं और twitter.github.io/bootstrap/base-css.html#buttons

— खोजता हूं

Answer 7

मुझे लगता है कि यह चीजों को करने का सबसे बूटस्ट्रैप-एस्क्यू तरीका होगा:

<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>

मैं जो कुछ भी कर रहा हूं वह कक्षा col-xs-12को बटन में जोड़ना है ।

Answer 8

<div class="col-md-9">
    <button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>

बूटस्ट्रैप 3 में, यह आपको चाहिए। मेरा मानना ​​है कि btn-largeकी चौड़ाई से अधिक था btn-block।

Answer 9

बटन की चौड़ाई को बटन टेक्स्ट द्वारा परिभाषित किया गया है। इसलिए यदि आप बटन की चौड़ाई को परिभाषित करना चाहते हैं, तो आप सीएसएस में पिक्सेल का उपयोग करके एक परिभाषित चौड़ाई का उपयोग कर सकते हैं या यदि आप चाहते हैं कि उत्तरदायी प्रतिशत प्रतिशत का उपयोग करें।