ट्विटर बूटस्ट्रैप का उपयोग करके ऊर्ध्वाधर व्हाट्सएप जोड़ें?

162

ट्विटर के बूटस्ट्रैप का उपयोग करके ऊर्ध्वाधर व्हाट्सएप को जोड़ने का सबसे अच्छा तरीका क्या है?

उदाहरण के लिए, मान लें कि मैं एक लैंडिंग पृष्ठ बना रहा हूं और एक निश्चित बटन के ऊपर और नीचे रिक्त व्हाट्सएप का एक बिट (100px) चाहेंगे। जाहिर है, मैं उस विशेष बटन के लिए एक निश्चित वर्ग बना सकता हूं। लेकिन, मुझे लगता है कि बूटस्ट्रैप को ऊर्ध्वाधर रिक्त स्थानों में जोड़ने का एक DRY तरीका होना चाहिए ।

— रयान
स्रोत

39

में बूटस्ट्रैप 4 देखते हैं रिक्ति utilites ।

प्रयुक्त संकेतन के लिए प्रलेखन का हवाला देते हुए :

रिक्ति उपयोगिताओं कि से सभी breakpoints पर लागू होते हैं, xsकरने के लिए xl, उन में कोई ब्रेकप्वाइंट संक्षिप्त नाम है। ऐसा इसलिए है क्योंकि उन वर्गों को min-width: 0ऊपर और ऊपर से लागू किया जाता है , और इस प्रकार एक मीडिया क्वेरी द्वारा बाध्य नहीं किया जाता है। हालाँकि, शेष विराम बिंदु, एक विराम बिंदु संक्षिप्त नाम शामिल करते हैं।

कक्षाएं प्रारूप का उपयोग कर नाम हैं {property}{sides}-{size}के लिए xs और {property}{sides}-{breakpoint}-{size}के लिए sm, md, lg, और xl।

संपत्ति कहां है:

m - निर्धारित वर्गों के लिए margin

p - निर्धारित वर्गों के लिए padding

जहां एक पक्ष है:

t- उन कक्षाओं के लिए जो सेट margin-topयाpadding-top

b- उन कक्षाओं के लिए जो सेट margin-bottomयाpadding-bottom

l- उन कक्षाओं के लिए जो सेट margin-leftयाpadding-left

r- उन कक्षाओं के लिए जो सेट margin-rightयाpadding-right

x- उन कक्षाओं के लिए जो दोनों सेट करते हैं *-leftऔर*-right

y- उन कक्षाओं के लिए जो दोनों सेट करते हैं *-topऔर*-bottom

रिक्त - उन कक्षाओं के लिए जो तत्व के सभी 4 पक्षों पर marginया सेट paddingकरते हैं

आकार कहां है:

0 - उन वर्गों के लिए जो इसे सेट करके मार्जिन या पैडिंग को खत्म करते हैं 0

1- (डिफ़ॉल्ट रूप से) उन कक्षाओं के लिए जो सेट marginया paddingकरने के लिए$spacer * .25

2- (डिफ़ॉल्ट रूप से) उन कक्षाओं के लिए जो सेट marginया paddingकरने के लिए$spacer * .5

3- (डिफ़ॉल्ट रूप से) उन कक्षाओं के लिए जो सेट marginया paddingकरने के लिए$spacer

4- (डिफ़ॉल्ट रूप से) उन कक्षाओं के लिए जो सेट marginया paddingकरने के लिए$spacer * 1.5

5- (डिफ़ॉल्ट रूप से) उन कक्षाओं के लिए जो सेट marginया paddingकरने के लिए$spacer * 3

तो एक तत्व के ऊपर और नीचे कुछ अतिरिक्त ऊर्ध्वाधर स्थान रखने के लिए आप my-5कक्षा का उपयोग करेंगे ।

— VLP
स्रोत

3

क्या आप एक मान्य वर्ग स्ट्रिंग का उदाहरण दे सकते हैं?

— कोलोब कैनियन

अच्छा! यह भी खूब रही।

— टिकी

51

V2 में, उस ऊर्ध्वाधर स्थान के लिए कुछ भी अंतर्निहित नहीं है, इसलिए आप कस्टम वर्ग के साथ रहना चाहेंगे। छोटी ऊंचाइयों के लिए, मैं आमतौर पर <div class="control-group">एक बटन के चारों ओर फेंक देता हूं ।

— jmdeldin
स्रोत

8

या <div class = "btn-toolbar">

— dy31avets

9

धन्यवाद। मैंने अब इस उपयोग के लिए कुछ स्पेसर 10, स्पेसर 50 इत्यादि कक्षाएं बनाई हैं। मैं देख रहा हूँ कि इसके लिए पहले से ही गिटहब

— रयान

1

@ रियान: अच्छा, पुल अनुरोध नहीं देखा। मैं इससे थोड़ा विवादित हूं। बूटस्ट्रैप लगभग पूरी तरह से प्रेजेंटेशनल (और सुविधाजनक) है, लेकिन यदि आप सभी अतिरिक्त HTML को अनदेखा करने के लिए पर्याप्त कठिन हैं, तो आप इससे शब्दार्थ निकाल सकते हैं। वर्टिकल स्पेसिंग विशुद्ध रूप से प्रेजेंटेशनल है, इसलिए मुझे लगता है कि यह कस्टम क्लास / आईडी के साथ सबसे अच्छा है।

— jmdeldin

2

यह v2 के लिए था, लेकिन ऐसा लगता है जैसे v3 ने रिक्ति को कम से कम कर दिया है .btn-toolbar, इसलिए आपको बस अपने नए मार्जिन के साथ एक नया वर्ग जोड़ना चाहिए।

— jmdeldin

3

जाहिरा तौर पर जीथब फीचर अनुरोध बंद कर दिया गया है और फीचर इसे बूटस्ट्रैप v4 में बना सकता है। bit.ly/R9oap9

— रयान

48

रैपिंग काम करता है लेकिन जब आप बस एक स्थान चाहते हैं, तो मुझे पसंद है:

<div class="col-xs-12" style="height:50px;"></div>

— छिपे हुए उपयोगकर्ता नाम
स्रोत

16

बूटस्ट्रैप के साथ काम करते समय इनलाइन शैली जोड़ना आम तौर पर एक अच्छा विचार नहीं है। इसे कम से कम CSS में जाना चाहिए।

— अलेक्सांकोट

2

ध्यान दें कि "col-xs-12" बिल्कुल वैसा ही है जैसा कि कोई क्लास नहीं है

— सोल्पेप्लाटा साकेतोस

34

यहाँ एक पुरानी कब्र खोदने के लिए क्षमा करें, लेकिन ऐसा क्यों नहीं करते?

<div class="form-group">
    &nbsp;
</div>

यह एक अंतरिक्ष को एक सामान्य रूप तत्व की ऊंचाई जोड़ देगा।

ऐसा लगता है कि एक फार्म पर लगभग 1 पंक्ति लगभग 50px (मेरे तत्व पर सिर्फ निरीक्षण किए गए 47px) है। यह एक क्षैतिज रूप है, बाएं 2col पर लेबल और दाएं 10col पर इनपुट है। तो आपके पिक्सेल अलग-अलग हो सकते हैं।

चूँकि मेरा मूल रूप से 50px है, मैं कोई मार्जिन या पैडिंग के साथ 50px लंबा स्पेसर बनाऊंगा;

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>

— उतारा
स्रोत

1

यह समूह के नीचे स्थान जोड़ता है लेकिन ऊपर नहीं

— icc97

बेशक, यह वही है, जो उसने पूछा था, एक ऊर्ध्वाधर रिक्त स्थान जोड़ने का एक तरीका। यदि आपको कस्टम फॉर्म-समूह या पंक्ति या यहां तक कि एक बटन की आवश्यकता है, तो मार्जिन को ओवरराइड करते हुए, इसे जोड़ने के लिए अपनी खुद की कक्षा बनाएं। Ie: class = "form-group spaced-group" और ".spaced-group {मार्जिन-टॉप: 15px! Important; मार्जिन-बॉटम: 15px! Important;}; .. यह सिर्फ कॉमन css-sense है।

— वेड

ओपी ने विशेष रूप से पूछा: " एक निश्चित बटन के ऊपर और नीचे खाली सफेद स्थान का एक बिट (100px)

— icc97

1

नहीं, यह एक उदाहरण था, उसका सवाल नहीं। उनका सवाल था "ट्विटर के बूटस्ट्रैप का उपयोग करके ऊर्ध्वाधर रिक्त स्थान जोड़ने का सबसे अच्छा तरीका क्या है?" - एक ऊर्ध्वाधर रिक्त स्थान एक विशिष्ट तत्व पर एक मार्जिन से अलग है। यदि वह सभी बटनों के लिए कर रहा था तो वह बीटीएन के मार्जिन को बदल सकता है या अपने वांछित मार्जिन के साथ "बीटीएन-स्पेस" की तरह अपनी कक्षा बना सकता है। अगर वह सिर्फ एक रास्ता जोड़ना चाहता है, जहां वह चाहता है, एक निश्चित ऊंचाई का एक स्पेसर जैसे मैंने जवाब दिया कि उसे क्या चाहिए। उन्होंने एक प्रश्न पूछा, और दूसरे का उदाहरण दिया। मुझे लगता है कि वह सीएसएस को जानता था कि वह हाशिये पर हावी हो सकता है।

— वेड

चूँकि उन्होंने एक DRY विधि, और बटन कहा था, तो मैं हाशिये के साथ एक बटन वर्ग बनाऊँगा जो मैं चाहता था: btn-spaced। यदि यह केवल बटनों के लिए नहीं था, तो एक सामान्य मार्जिन जो पंक्तियों, प्रपत्र-समूहों पर लागू होता है, जो भी हो। जैसे क्लास = "रो स्पेस-स्माल" या क्लास = "फॉर्म-ग्रुप स्पेस-मीडियम" .. जहां छोटे मीडियम और लार्ज मार्जिन के सिर्फ वेरिएंट हैं, और वस्तुतः कुछ भी करने के लिए लागू किया जा सकता है। - ऑप जो चाहता है, उसे बताना मुश्किल है। केवल या किसी भी तत्व के लिए बटन के लिए ..

— वेड

24

मुझे पता है कि यह पुराना है, लेकिन मैं यहाँ एक ही चीज़ की खोज में आया था, मैंने पाया कि बूटस्ट्रैप में हेल्प-ब्लॉक है, जो इन स्थितियों के लिए बहुत उपयोगी है:

<div class="help-block"></div>

— पार करना
स्रोत

21

संस्करण 3 के लिए यह बड़े करीने से प्राप्त करने के लिए "बूटस्ट्रैप" तरीका प्रतीत नहीं होता है।

ए panel, ए wellऔर form-groupऑल वर्टिकल रिक्ति प्रदान करते हैं।

बूटस्ट्रैप v4 के रोडमैप पर एक अधिक औपचारिक विशिष्ट ऊर्ध्वाधर रिक्ति समाधान है, जाहिर है

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532

— ErichBSchulz
स्रोत

5

.form-group सबसे अच्छा विकल्प लगता है क्योंकि css मार्जिन-बॉटम: 15px तक सीमित है। .वेल और। पैन का उपयोग नहीं किया जाना चाहिए यदि आप बस कुछ रिक्ति जोड़ना चाहते हैं क्योंकि उनके पास अन्य विशेषताएं हैं (जैसे पृष्ठभूमि, गद्दी, सीमा, आदि)

— xaa

9

मैंने केवल विभिन्न ऊंचाइयों का उपयोग करके एक दिव्य वर्ग का निर्माण किया

<div class="divider-10"></div>

सीएसएस है:

.divider-10 {
    width:100%; 
    min-height:1px; 
    margin-top:10px; 
    margin-bottom:10px;  
    display:inline-block; 
    position:relative;
}

बस कभी भी ऊंचाइयों की आवश्यकता के लिए एक विभक्त वर्ग बनाएं।

— user5593012
स्रोत

8

मेरी चाल। सुरुचिपूर्ण नहीं है, लेकिन यह काम करता है:

<p>&nbsp;</p>

— asiniy
स्रोत

2

@JayKilleen +1 आपको उत्तर के रूप में पोस्ट करना चाहिए। शायद लोग रूपरेखाओं पर निर्भर होते जा रहे हैं और मूल बातें भूलने लगे हैं।

— ADJenks

5

बस उपयोग करें <br/>। मैंने खुद को इस सवाल के जवाब की तलाश में यहाँ पाया और फिर एक टिप्पणी में उपयोगकर्ता JayKilleen द्वारा सुझाए गए सरल लाइन ब्रेक का उपयोग करने के बारे में नहीं सोचने के लिए मूर्खतापूर्ण महसूस किया।

— ADJenks
स्रोत

नकारात्मक पक्ष यह है कि आपको सटीक 100px नियंत्रण नहीं मिलता है , लेकिन यह निश्चित रूप से उचित मात्रा में स्थान जोड़ने के लिए काम करना चाहिए।

— मिश्रण 3 डी

1

@ मिक्स 3 डी, आप वहीं के वहीं हैं, मुझे पहली बार में ध्यान नहीं आया कि उन्होंने इसकी परवाह 100px की है। मुझे लगा कि वह सिर्फ एक "बिट" चाहता है। वह निश्चित रूप से अपना सहायक वर्ग बना सकता था जैसे कि सभी ने सुझाव दिया था। लेकिन चूंकि यह पद इतने साल पुराना है, इसलिए वह अब सटीक रिक्ति के लिए बूटस्ट्रैप 4 में अपग्रेड कर सकता है, या इसके लिए सहायक कक्षाएं ले सकता है।

— ADJenks

5

मुझे पता है कि यह पुराना है और पहले से ही पोस्ट किए गए कई अच्छे समाधान हैं, लेकिन मेरे लिए काम करने वाला एक सरल समाधान निम्नलिखित सीएसएस है

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

और फिर अपने html में div बनाएं

<div class="divider"></div>

— संजीव
स्रोत

4

मैंने प्रयोग करने की कोशिश की <div class="control-group">और इसने मेरा लेआउट नहीं बदला। इसने ऊर्ध्वाधर स्थान नहीं जोड़ा। मेरे लिए काम करने वाला समाधान था:

<ol style="visibility:hidden;"></ol>

यदि वह आपको पर्याप्त ऊर्ध्वाधर स्थान नहीं देता है, तो आप नेस्टेड <li> </li>टैग जोड़कर आकस्मिक रूप से अधिक प्राप्त कर सकते हैं ।

— जॉन एर्क
स्रोत

धन्यवाद, और आपका सुझाव बूटस्ट्रैप के साथ या उसके बिना काम करेगा। लेकिन सवाल विशेष रूप से रिक्ति को जोड़ने के लिए ट्विटर बूटस्ट्रैप का उपयोग करने के बारे में था।

— जोनाथन

1

<form>
 <fieldset class="form-group"><input type="text" class="form-control" placeholder="Input"/></fieldset>
 <fieldset class="form-group"><button class="btn btn-primary"/>Button</fieldset>
</form>

http://v4-alpha.getbootstrap.com/components/forms/#form-controls

— मांद
स्रोत

1

यह सवाल का जवाब कैसे है?

— मैट एस

यह वर्टिकल स्पेसिंग जोड़ता है क्योंकि मूल पोस्टर के लिए कहा गया था, बूटस्ट्रैप देवता अब बीटा संस्करण में नवीनतम संस्करण (4) में इसके लिए खानपान कर रहे हैं। यह वास्तव में सही उत्तर है और यदि आप बूटस्ट्रैप में वर्टिकल स्पेसिंग करते हैं तो आप देखेंगे कि इसे पहले के लिए नहीं बनाया गया था। कृपया उन सामानों को डाउनवोट न करें जिन्हें आपने परीक्षण या गुगले नहीं किया है।

— डेन

आपने स्पष्ट रूप से प्रश्न नहीं पढ़ा है। "मैं एक निश्चित बटन के ऊपर और नीचे खाली सफेद स्थान का एक बिट (100px) चाहूंगा।" एक निश्चित बटन ... एक निश्चित बटन ...

— मैट एस

1

इससे पहले उन्होंने कहा: "उदाहरण के लिए, मान लीजिए"। यह सिर्फ एक उदाहरण था, यह विशिष्ट समस्या नहीं थी। संदर्भ से बाहर मत निकलो। मैंने जो उदाहरण दिया वह पर्याप्त है और मेरे द्वारा दी गई सभी जानकारी पर्याप्त है।

— डेन

-3

इससे ज्यादा DRY कुछ भी नहीं है

.btn {
    margin-bottom:5px;
}

— PH7
स्रोत

13

मैं बेस बूटस्ट्रैप सीएसएस कक्षाओं की स्टाइल को संशोधित करने के खिलाफ सुझाव दूंगा।

— जेम्स पालवागा

1

@ जेम्सप्लावागा +1। लेकिन अगर आपके आवेदन में यह सामान्य मानक था, तो आप LESS और चरों का उपयोग करके और / या सावधानीपूर्वक ओवरराइड स्टाइलशीट का उपयोग करके बूटस्ट्रैप स्टाइल को ओवरराइड कर सकते हैं।

— जोनाथन