483

class="row"ट्विटर बूटस्ट्रैप फ्रेमवर्क का उपयोग करने वाले तत्वों में मार्जिन शीर्ष कैसे जोड़ें ?

css twitter-bootstrap

801

ट्विटर बूटस्ट्रैप में पंक्ति को संपादित करना या ओवरराइड करना एक बुरा विचार है, क्योंकि यह पृष्ठ मचान का एक मुख्य हिस्सा है और आपको शीर्ष मार्जिन के बिना पंक्तियों की आवश्यकता होगी।

इसे हल करने के लिए, इसके बजाय एक नया वर्ग "टॉप-बफर" बनाएं जो आपको आवश्यक मानक मार्जिन जोड़ता है।

.top-buffer { margin-top:20px; }

और फिर इसे पंक्ति divs पर उपयोग करें जहाँ आपको एक शीर्ष मार्जिन की आवश्यकता है।

<div class="row top-buffer"> ...

— Acyra
स्रोत

45

मूल पंक्ति को संपादित करना एक रूपरेखा के लिए गलत है, और नई कक्षा को केवल पंक्ति वर्ग को पूरक करना चाहिए ... यह एक सूक्ष्म अंतर है लेकिन ट्विटर बूटस्ट्रैप में पंक्ति में एक विशिष्ट पृष्ठ लेआउट भूमिका है। वैसे भी, मैं सिर्फ मदद करने की कोशिश कर रहा हूं, मेरा समाधान समस्या के लिए काम कर रहा है।

— एक्यरा

11

कोई रास्ता नहीं, ये उत्तर IMHO से थोड़े अलग हैं। यह अधिक प्रयोग करने योग्य है क्योंकि यह "आपकी कक्षा की शैली को नाम देता है ताकि आपका html आसानी से पढ़े" और आप पंक्ति में मार्जिन-टॉप को पढ़ सकें बजाय रोचे की बात करें। यह उत्तर ट्विटर बूटस्ट्रैप पैटर्न के साथ अधिक इनलाइन है।

— डीन हिलर

2

वे बूटस्ट्रैप 4 में विशिष्ट वर्टिकल स्पेसिंग क्लासेज जोड़ने जा रहे हैं: github.com/twbs/bootstrap/issues/4286

— icc97

2

मुझे इन टिप्पणियों से पता चला है कि डेवलपर्स बहुत राय रखते हैं और कुछ 2 + 3 = 5 और अन्य 3 + 2 = 5 को पसंद करते हैं ... आगे बढ़ रहे हैं ...

— Fabio S.

3

@FabioS। क्या सीखा जाना चाहिए कि बूटस्ट्रैप जैसी रूपरेखा के लिए, मूल कोड को संपादित करना या ओवरराइट करना एक बुरा विचार है। परिदृश्य अनंत हैं, लेकिन यहां कुछ उदाहरण हैं। a।) ओवरराइटिंग - यदि आप .row क्लास को ओवरराइट करते हैं, तो आपको अब अपने प्रोजेक्ट के माध्यम से जाने और उन पंक्तियों में एक अतिरिक्त क्लास जोड़ने की जरूरत है जो मार्जिन बी को प्राप्त नहीं करना चाहिए।) नेटिव कोड को एडिट करना - आपको काम में एक प्रोजेक्ट विरासत में मिलता है और आप चाहते हैं। bootstrap4 पर जाने के लिए; उफ़! कुछ भी ठीक नहीं लगता !? अब आपके पास बूटस्ट्रैप 3 फ़ाइल के माध्यम से जाने का भार है जो पृथ्वी पर खोजने की कोशिश कर रहा है कि पिछले डेवलपर ने क्या बदल दिया है।

— पेरोइजा

176

ठीक है बस आपको बता दें कि तब क्या हुआ था, मैंने कुछ नई कक्षाओं का उपयोग करके तय किया जैसा कि ऊपर Acyra कहते हैं:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

जब भी मैं चाहता हूँ मैं <div class="row top7"></div>

बेहतर उत्तरदायी के लिए आप उदाहरण margin-top:7%के 5pxलिए जोड़ सकते हैं : डी

— यह मैं हूँ
स्रोत

13

मुझे लगता है कि यह समाधान स्वीकृत समाधान की तुलना में बहुत अधिक सुरुचिपूर्ण है।

— rdiaz82

72

यह समान हे।

— एलेक्जेंडर

@alexander लेकिन अधिक सामान्य।

— एजाज

6

कैसे .top-buffer { margin-top:20px; }अलग है .top30 { margin-top:30px; }? खैर, किसी भी डेवलपर के दृष्टिकोण से: यह समान है। उपयोग के मामले को फिट करने के लिए समायोजन यहां नहीं गिना जाता है। विशेष रूप से नहीं, अगर ओपी ने अपने सवाल का जवाब दिया।

— अलेक्जेंडर

2

क्लासिक 17px शीर्ष मार्जिन; बहुत उपयोगी।

— adripanico

129

बूटस्ट्रैप ३

यदि आपको बूटस्ट्रैप में पंक्तियों को अलग करने की आवश्यकता है, तो आप बस उपयोग कर सकते हैं .form-group। यह पंक्ति के निचले भाग में 15px मार्जिन जोड़ता है।

आपके मामले में, मार्जिन शीर्ष पाने के लिए, आप इस वर्ग को पिछले .rowतत्व में जोड़ सकते हैं

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

बूटस्ट्रैप ४

आप बिल्ट-इन स्पेसिंग कक्षाओं का उपयोग कर सकते हैं

<div class="row mt-3"></div>

वर्ग नाम में "t" यह केवल "शीर्ष" पक्ष पर लागू होता है, नीचे, बाएं, दाएं के समान वर्ग होते हैं। संख्या अंतरिक्ष के आकार को परिभाषित करती है।

— Buksy
स्रोत

क्या फॉर्म-समूह को बीएस 4 से छीन लिया गया था?

— जेड। खुल्लाह

3

नहीं, form-groupअभी भी मौजूद है , लेकिन मार्जिन / पैडिंग के लिए विशेष कक्षाएं जोड़ी गई हैं जो काम कर सकती हैं और अधिक विकल्प हैं।

— बुक्सि

क्या बूटस्ट्रैप V 4 में इसमें कई बदलाव हुए हैं? मैं अभी 4 के संस्करण पर हूं और mt-3इतना काम नहीं करता हूंform-group

— निक श्वाडेरर

यह काम करना चाहिए , अगर आपके प्रोजेक्ट से जुड़ी बूटस्ट्रैप सीएसएस में ".mt-3" वर्ग परिभाषा है।

— बुक्सि

81

के लिए बूटस्ट्रैप 4 अंतराल का उपयोग लागू किया जाना चाहिए

आशुलिपि उपयोगिता वर्ग

निम्नलिखित प्रारूप में:

{} {संपत्ति पक्षों} - {} आकार

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

m - मार्जिन सेट करने वाली कक्षाओं के लिए
p - पैडिंग सेट करने वाली कक्षाओं के लिए

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

टी - उन वर्गों के लिए जो मार्जिन-टॉप या पेडिंग-टॉप सेट करते हैं
b - उन वर्गों के लिए जो मार्जिन-बॉटम या पेडिंग-बॉटम सेट करते हैं
एल - उन वर्गों के लिए जो मार्जिन-लेफ्ट या पेडिंग-लेफ्ट सेट करते हैं
r - उन वर्गों के लिए जो मार्जिन-राइट या पेडिंग-राइट सेट करते हैं
x - उन कक्षाओं के लिए, जो * -left और * -right दोनों सेट करते हैं
y - उन कक्षाओं के लिए जो * -top और * -bottom दोनों निर्धारित करते हैं
रिक्त - उन वर्गों के लिए जो तत्व के सभी 4 पक्षों पर एक मार्जिन या पैडिंग सेट करते हैं

आकार कहां है:

0 - उन वर्गों के लिए जो इसे 0 पर सेट करके मार्जिन या पैडिंग को समाप्त करते हैं
1 - (डिफ़ॉल्ट रूप से) उन वर्गों के लिए जो $ स्पेसर के लिए मार्जिन या पैडिंग सेट करते हैं। * .25
2 - (डिफ़ॉल्ट रूप से) उन वर्गों के लिए जो $ स्पेसर के लिए मार्जिन या पैडिंग सेट करते हैं। * .5
3 - (डिफ़ॉल्ट रूप से) उन वर्गों के लिए जो $ स्पेसर के लिए मार्जिन या पैडिंग सेट करते हैं
4 - (डिफ़ॉल्ट रूप से) उन वर्गों के लिए जो $ स्पेसर के लिए मार्जिन या पैडिंग सेट करते हैं * 1.5
5 - (डिफ़ॉल्ट रूप से) उन वर्गों के लिए जो $ स्पेसर के लिए मार्जिन या पैडिंग सेट करते हैं * 3
ऑटो - उन वर्गों के लिए जो ऑटो को मार्जिन सेट करते हैं

तो आपको इनमें से कोई भी काम करना चाहिए:

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

अधिक विवरण के लिए डॉक्स पढ़ें । लाइव उदाहरणों को यहां देखें ।

— राजकरन मिश्रा
स्रोत

3

यह बूटस्ट्रैप 4 की रिलीज़ के साथ अब स्वीकृत उत्तर होना चाहिए। यह इन बिल्ट-इन कक्षाओं के साथ आता है, नए बनाने की आवश्यकता नहीं है।

— मैट के

45

कभी-कभी मार्जिन-टॉप डिज़ाइन समस्याओं का कारण बन सकता है:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

इसलिए, मैं "मार्जिन-टॉप क्लासेस" के बजाय "मार्जिन-बॉटम क्लासेस" बनाने की सलाह देता हूं और उन्हें पिछले आइटम पर लागू करता हूं।

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं तो LESS बूटस्ट्रैप फ़ाइलों को आयात करने के लिए आनुपातिक बूटस्ट्रैप थीम स्थानों के साथ मार्जिन-नीचे वर्गों को परिभाषित करने का प्रयास करें:

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}

— kurroman
स्रोत

33

मैंने इन कक्षाओं को अपने बूटस्ट्रैप स्टाइलशीट में जोड़ा

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

उदाहरण

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>

— srmilon
स्रोत

27

मैं शीर्ष मार्जिन को बदलने के लिए इन वर्गों का उपयोग कर रहा हूं:

.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }

जब मुझे किसी तत्व की आवश्यकता होती है, तो ऊपर के तत्व से 2em रिक्ति होना चाहिए, मैं इसे इस तरह उपयोग करता हूं:

<div class="row margin-top-20">Something here</div>

यदि आप पिक्सेल को प्रीफ़ेयर करते हैं, तो उसे अपने तरीके से करने के लिए उन्हें px में बदलें।

— Hexodus
स्रोत

6

अच्छा विचार है, लेकिन मैं संख्याओं को दूर करता हूं, क्योंकि वे बहुत विशिष्ट हैं। यदि आप s, m, l, xl, xxl, इत्यादि जैसे सार के साथ चिपके रहते हैं, तो आप टेम्प्लेट में नाम बदलने के लिए बिना css के माध्यम से आकारों को बदल सकते हैं।

— माइक पर्सल

1

@MikePurcell अच्छा सोचा और यह आपके लिए सही समाधान हो सकता है। लेकिन मैं मार्जिन को परिभाषित करने के लिए अधिक सटीक तरीका पसंद करता हूं। Px के बजाय em का उपयोग करने से मुझे यह प्राप्त करने के लिए एक ढीला तरीका मिलता है, वह भी विशिष्ट नहीं।

— हेक्सोडस

3

<div class="row margin-top-20">ओवर का क्या फायदा <div class"row" style="margin-top: 2.0em">?

— icc97

@ icc97 असल में, चिंताओं में से अलग, लेकिन यहाँ आप दूसरों की राय देख सकते हैं: stackoverflow.com/a/2612494/1683224 ।

— विले मार्केज

@WileyMarques उदाहरण के लिए "टॉप-बफर" (जैसा कि स्वीकृत उत्तर में है) नामक वर्ग के लिए सही है, लेकिन मार्जिन-टॉप -20 नामक वर्ग के लिए कोई मतलब नहीं है। जब तक आप मार्जिन-टॉप -20 के लिए खुश नहीं होते हैं, तब वास्तव में पैडिंग के 2 के अलावा कुछ और जोड़ते हैं, जो सिर्फ भ्रमित करने वाला होगा।

— 14

9

आप बूटस्ट्रैप 4 के लिए निम्न वर्ग का उपयोग कर सकते हैं:

mt-0 mt-1 mt-2 mt-3 mt-4 ...

Ref: https://v4-alpha.getbootstrap.com/utilities/spacing/

— Smilefounder
स्रोत

4

बूटस्ट्रैप 4 अल्फा, मार्जिन-टॉप के लिए: शॉर्टहैंड सीएसएस क्लास नाम mt-1, mt-2 (mt-lg-5, mt-sm-2) नीचे, दाएं, बाएं के लिए समान है, और आपके पास ऑटो क्लास एमएल भी है ऑटो

    <div class="mt-lg-1" ...>

इकाइयों से हैं 1 में हैं 5: variables.scss में जिसका अर्थ है कि यदि आप mt-1 सेट करते हैं तो यह मार्जिन शीर्ष के .25rem देता है।

$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  ),
  2: (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  3: (
    x: $spacer-x,
    y: $spacer-y
  ),
  4: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  5: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) !default;

यहाँ अधिक पढ़ें

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

— शेरिफ साहब
स्रोत

3

.Css फ़ाइल में इस वर्ग में जोड़ें:

.row {
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;
}

या एक नया वर्ग बनाते हैं और इसे तत्व में जोड़ते हैं

.rowSpecificFormName td {
    margin-top: 50px;
}

— नीलसन रेमन
स्रोत

7

uhmmmmm मुझे css पसंद नहीं है, क्या होगा अगर मुझे अन्य पृष्ठों में बिना किसी मार्जिन वाली पंक्तियों की आवश्यकता है?

— इमे

आप एक नया वर्ग बना सकते हैं .rowSpecificForm

— नीलसन रेमन

2

लेकिन ट्विटर बूटस्ट्रैप में केवल 'मार्जिन-टॉप' के लिए कोई परिभाषित सीएसएस क्लास नहीं है।

— नीलसन रेमन

अजीब तरह से उन्होंने कुछ वर्ग को खड़ी नहीं खड़ी की, मुझे उन्हें जोड़ने की जरूरत है कोई अन्य उपाय नहीं है: /, धन्यवाद नीलसन

— itme

8

सीएसएस कैस्केड्स को याद रखें, इसलिए आपको बूटस्ट्रैप.css को कभी भी संपादित नहीं करना पड़ेगा।

— ONOZ

1

यदि आप केवल एक पृष्ठ पर परिवर्तन करना चाहते हैं, तो निम्नलिखित शैली नियम जोड़ें:

 #myCustomDivID .row {
     margin-top:20px;
 }

— fredyfx
स्रोत

1

बूटस्ट्रैप 4 अल्फा + में आप इसका उपयोग कर सकते हैं

class margin-bottom-5

वर्गों को प्रारूप का उपयोग करके नाम दिया गया है: {property}-{sides}-{size}

— अल क्वराशी
स्रोत

1

just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
  .small-top
   {
     margin-top: 25px;  
   }
</style>    
<div class="row small-top">
   <div class="col-md-12">
   </div>
 </div>

— शिव कृष्ण
स्रोत

कृपया अपने उत्तर में स्पष्टीकरण जोड़ें। स्पष्टीकरण के बिना उत्तर देना बेकार है।

— ADreNaLiNe-DJ

1

Bootstrap3

सीएसएस (केवल गटर, मार्जिन के बिना):

.row.row-gutter {
  margin-bottom: -15px;
  overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
  margin-bottom: 15px;
}

CSS (लगभग समान मार्जिन, 15px / 2):

.row.row-margins {
  padding-top: 7px; /* or margin-top: 7px; */
  padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
  margin-top: 8px;
  margin-bottom: 8px;
}

उपयोग:

<div class="row row-gutter">
    <div class="col col-sm-9">first</div>
    <div class="col col-sm-3">second</div>
    <div class="col col-sm-12">third</div>
</div>

(SASS या LESS 15px बूटस्ट्रैप से परिवर्तनशील हो सकता है)

— Isometriq
स्रोत

1

<div class="row row-padding">

सरल कोड

— हर्षवर्धन सिंह बघेल
स्रोत

1

बूटस्ट्रैप का उपयोग करना - 4 आप पंक्ति के बीच रिक्ति बनाने के लिए इस वर्ग को जोड़ सकते हैं

— हर्षवर्धन सिंह बघेल

0

आप इस कोड को जोड़ सकते हैं:

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

— Tarak_bz
स्रोत

0

बस इस bs3-upgradeहेल्पर का उपयोग spacings और टेक्स्ट एलीगमेंट के लिए करें ...

https://github.com/studija/bs3-upgrade

— TheAivis
स्रोत

0

यदि आप बूटस्ट्रैप 3.3.7 का उपयोग कर रहे हैं, तो आप NPM के माध्यम से ओपन सोर्स लाइब्रेरी बूटस्ट्रैप-स्पेसर का उपयोग कर सकते हैं

npm install bootstrap-spacer

या आप github पृष्ठ पर जा सकते हैं:

https://github.com/chigozieorunta/bootstrap-spacer

यह एक उदाहरण है कि यह .row-स्पेसर वर्ग का उपयोग करके अंतरिक्ष पंक्तियों के लिए कैसे काम करता है:

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

यदि आपको कॉलम के बीच रिक्त स्थान की आवश्यकता है, तो आप .row-col-spacer वर्ग भी जोड़ सकते हैं:

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

और आप विभिन्न .row-spacer और .row-col-spacer वर्गों को एक साथ जोड़ सकते हैं:

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

— चिगोजी ओरुंटा
स्रोत

1

मैं सीएसएस की 40 लाइनों के लिए एक निर्भरता जोड़ने के खिलाफ सलाह दूंगा

— एंड्रयू डायमंड

-3

मेरी चाल। इतना साफ नहीं है, लेकिन मेरे लिए अच्छा काम करता है

<p>&nbsp;</p>

— asiniy
स्रोत

ट्विटर बूटस्ट्रैप - पंक्तियों के बीच शीर्ष स्थान जोड़ें

बूटस्ट्रैप ३

बूटस्ट्रैप ४