बूटस्ट्रैप 3 दाईं ओर बाईं ओर नहीं है

Question

बीएस 3 के संबंध में अगर मुझे दाईं ओर सामग्री का केवल एक संकीर्ण कॉलम चाहिए था तो मैं 9 का ऑफसेट वर्ग और 3 का कॉलम उपयोग कर सकता हूं।

हालांकि, क्या होगा अगर मैं रिवर्स और बाईं तरफ चाहता था? क्या बीएस में ऐसा करने का कोई उचित तरीका है या मुझे सिर्फ अपने सीएसएस तरीकों का उपयोग करना चाहिए? मैं अपनी सामग्री के साथ 3 का कॉलम बनाने की सोच रहा था और सिर्फ 9 का एक खाली कॉलम।

Answer 1

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

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-xs-offset-9">
      I'm a right column of 3
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3">
      I'm a left column of 3
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      And I'm some content below both columns
    </div>
  </div>
</div>

Comments

रिक्त कॉलम के लिए, बूटस्ट्रैप की col-X-pull-Yकक्षाओं का उपयोग करें । उदाहरण के लिए, किसी चीज़ को दाईं ओर 50% आकार में धकेलने के लिए लेकिन अंतरिक्ष के एक कॉलम को दाईं ओर छोड़ें (उदाहरण के रूप में 12-कॉलम ग्रिड में):col-xs-6 pull-right col-xs-pull-1

— जेम्स कुशिंग

यह बाईं ओर है क्योंकि आपने सामग्री को अलग-अलग पंक्तियों में मैन्युअल रूप से विभाजित किया है। और यदि आप उन्हें हटा देते हैं और निम्नलिखित सामग्री 100% चौड़ी नहीं होती है (अर्थात 50% चौड़ाई के कुछ स्तंभों का अनुसरण करती है col-xs-6) तो यह बहुत अधिक मात्रा में होगा।

— kpull1

मुझे नहीं पता कि यह इतने वोटों के साथ स्वीकृत उत्तर क्यों है, यह सवाल का जवाब नहीं देता है, यहां जो कुछ भी हुआ है, वह है- col-xs-3 को एक पंक्ति द्वारा लपेटा गया है, यही कारण है कि आगे कोई सामग्री नहीं उतरी है वही पंक्ति / पंक्ति। यदि एक और col-xs-3 था, तो यह उसी पंक्ति पर 1 col-xs-3 के ठीक बगल में होगा, इसलिए यह उत्तर प्रश्न का उत्तर नहीं देता है। Kpull1 द्वारा उत्तर मांगे गए परिणाम को प्राप्त करता है।

— NZ देव

Answer 2

मैं निम्नलिखित सरल कस्टम सीएसएस का उपयोग कर रहा हूं जिसे मैंने इसे प्राप्त करने के लिए लिखा था।

.col-xs-offset-right-12 {
  margin-right: 100%;
}
.col-xs-offset-right-11 {
  margin-right: 91.66666667%;
}
.col-xs-offset-right-10 {
  margin-right: 83.33333333%;
}
.col-xs-offset-right-9 {
  margin-right: 75%;
}
.col-xs-offset-right-8 {
  margin-right: 66.66666667%;
}
.col-xs-offset-right-7 {
  margin-right: 58.33333333%;
}
.col-xs-offset-right-6 {
  margin-right: 50%;
}
.col-xs-offset-right-5 {
  margin-right: 41.66666667%;
}
.col-xs-offset-right-4 {
  margin-right: 33.33333333%;
}
.col-xs-offset-right-3 {
  margin-right: 25%;
}
.col-xs-offset-right-2 {
  margin-right: 16.66666667%;
}
.col-xs-offset-right-1 {
  margin-right: 8.33333333%;
}
.col-xs-offset-right-0 {
  margin-right: 0;
}
@media (min-width: 768px) {
  .col-sm-offset-right-12 {
    margin-right: 100%;
  }
  .col-sm-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-sm-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-sm-offset-right-9 {
    margin-right: 75%;
  }
  .col-sm-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-sm-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-sm-offset-right-6 {
    margin-right: 50%;
  }
  .col-sm-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-sm-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-sm-offset-right-3 {
    margin-right: 25%;
  }
  .col-sm-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-sm-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-sm-offset-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 992px) {
  .col-md-offset-right-12 {
    margin-right: 100%;
  }
  .col-md-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-md-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-md-offset-right-9 {
    margin-right: 75%;
  }
  .col-md-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-md-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-md-offset-right-6 {
    margin-right: 50%;
  }
  .col-md-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-md-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-md-offset-right-3 {
    margin-right: 25%;
  }
  .col-md-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-md-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-md-offset-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .col-lg-offset-right-12 {
    margin-right: 100%;
  }
  .col-lg-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-lg-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-lg-offset-right-9 {
    margin-right: 75%;
  }
  .col-lg-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-lg-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-lg-offset-right-6 {
    margin-right: 50%;
  }
  .col-lg-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-lg-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-lg-offset-right-3 {
    margin-right: 25%;
  }
  .col-lg-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-lg-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-lg-offset-right-0 {
    margin-right: 0;
  }
}

Comments

प्रतिशत को हार्डकोड करना बहुत ही गैर-आदर्श है। इसके अतिरिक्त, यह बदलना संभव है कि बूटस्ट्रैप का ग्रिड सिस्टम कैसे काम करता है, इसलिए आपको 12 कॉलम रखने की गारंटी नहीं है। उस उदाहरण में, यह उत्तर विफल रहता है। आप ग्रिड कॉलम की संख्या के सापेक्ष प्रतिशत की गणना करना बेहतर समझते हैं।

— मुहम्मद अब्दुल-रहीम

बूटस्ट्रैप केवल यही काम बाईं ओर से करता है

— स्कॉट

एक महान समाधान! यह बूटस्ट्रैप में होना चाहिए, मुझे कभी समझ में नहीं आया कि उन्होंने क्यों नहीं जोड़ा

— फारुक

Answer 3

<div class="row">
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
</div>

Answer 4

मैंने रुक्शान के जवाब के आधार पर बूटस्ट्रैप SASS (v3.3.5) को संशोधित किया

calc-grid-columnमिक्सिन के अंत में इसे जोड़ें mixins/_grid-framework.scss, $type == offsetअगर सही स्थिति के नीचे ।

@if ($type == offset-right) {
      .col-#{$class}-offset-right-#{$index} {
          margin-right: percentage(($index / $grid-columns));
      }
  }

वर्गों को उत्पन्न करने के लिए make-gridमिक्सिन को संशोधित करें ।mixins/_grid-framework.scssoffset-right

// विशिष्ट वर्ग के लिए ग्रिड बनाएं
@ मिक्सिन मेक-ग्रिड ($ वर्ग) {
  @ फ्लैंक-ग्रिड-कॉलम ($ वर्ग);
  @ पिन-लूप-ग्रिड-कॉलम ($ ग्रिड-कॉलम, $ वर्ग, चौड़ाई);
  @ पिन-ग्रिड-कॉलम ($ ग्रिड-कॉलम, $ वर्ग, पुल);
  @ लूप-ग्रिड-कॉलम ($ ग्रिड-कॉलम, $ वर्ग, धक्का);
  @ पिन-लूप-ग्रिड-कॉलम ($ ग्रिड-कॉलम, $ वर्ग, ऑफ़सेट);
  @ पिन-लूप-ग्रिड-कॉलम ($ ग्रिड-कॉलम, $ वर्ग, ऑफ़सेट-राइट);
}

आप तब col-sm-offset-right-2और जैसी कक्षाओं का उपयोग कर सकते हैंcol-md-offset-right-1

Comments

percentageमानों को हार्डकोड करने के बजाय उपयोग करने के लिए +1 ; यह बूटस्ट्रैप आंतरिक रूप से ग्रिड सिस्टम को कैसे संभालता है, इसके करीब है, साथ ही यह एक चर ग्रिड कॉलम की अनुमति देता है यदि डिफ़ॉल्ट 12 अवांछित है।

— मुहम्मद अब्दुल-रहीम

Answer 5

चूंकि Google को यह उत्तर पसंद आ रहा है ...

यदि आप बूटस्ट्रैप 4 के नामकरण सम्मेलन का मिलान करना चाहते हैं, तो ऑफसेट - * - #, यहां वह संशोधन है:

.offset-right-12 {
  margin-right: 100%;
}
.offset-right-11 {
  margin-right: 91.66666667%;
}
.offset-right-10 {
  margin-right: 83.33333333%;
}
.offset-right-9 {
  margin-right: 75%;
}
.offset-right-8 {
  margin-right: 66.66666667%;
}
.offset-right-7 {
  margin-right: 58.33333333%;
}
.offset-right-6 {
  margin-right: 50%;
}
.offset-right-5 {
  margin-right: 41.66666667%;
}
.offset-right-4 {
  margin-right: 33.33333333%;
}
.offset-right-3 {
  margin-right: 25%;
}
.offset-right-2 {
  margin-right: 16.66666667%;
}
.offset-right-1 {
  margin-right: 8.33333333%;
}
.offset-right-0 {
  margin-right: 0;
}
@media (min-width: 576px) {
  .offset-sm-right-12 {
    margin-right: 100%;
  }
  .offset-sm-right-11 {
    margin-right: 91.66666667%;
  }
  .offset-sm-right-10 {
    margin-right: 83.33333333%;
  }
  .offset-sm-right-9 {
    margin-right: 75%;
  }
  .offset-sm-right-8 {
    margin-right: 66.66666667%;
  }
  .offset-sm-right-7 {
    margin-right: 58.33333333%;
  }
  .offset-sm-right-6 {
    margin-right: 50%;
  }
  .offset-sm-right-5 {
    margin-right: 41.66666667%;
  }
  .offset-sm-right-4 {
    margin-right: 33.33333333%;
  }
  .offset-sm-right-3 {
    margin-right: 25%;
  }
  .offset-sm-right-2 {
    margin-right: 16.66666667%;
  }
  .offset-sm-right-1 {
    margin-right: 8.33333333%;
  }
  .offset-sm-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 768px) {
  .offset-md-right-12 {
    margin-right: 100%;
  }
  .offset-md-right-11 {
    margin-right: 91.66666667%;
  }
  .offset-md-right-10 {
    margin-right: 83.33333333%;
  }
  .offset-md-right-9 {
    margin-right: 75%;
  }
  .offset-md-right-8 {
    margin-right: 66.66666667%;
  }
  .offset-md-right-7 {
    margin-right: 58.33333333%;
  }
  .offset-md-right-6 {
    margin-right: 50%;
  }
  .offset-md-right-5 {
    margin-right: 41.66666667%;
  }
  .offset-md-right-4 {
    margin-right: 33.33333333%;
  }
  .offset-md-right-3 {
    margin-right: 25%;
  }
  .offset-md-right-2 {
    margin-right: 16.66666667%;
  }
  .offset-md-right-1 {
    margin-right: 8.33333333%;
  }
  .offset-md-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 992px) {
  .offset-lg-right-12 {
    margin-right: 100%;
  }
  .offset-lg-right-11 {
    margin-right: 91.66666667%;
  }
  .offset-lg-right-10 {
    margin-right: 83.33333333%;
  }
  .offset-lg-right-9 {
    margin-right: 75%;
  }
  .offset-lg-right-8 {
    margin-right: 66.66666667%;
  }
  .offset-lg-right-7 {
    margin-right: 58.33333333%;
  }
  .offset-lg-right-6 {
    margin-right: 50%;
  }
  .offset-lg-right-5 {
    margin-right: 41.66666667%;
  }
  .offset-lg-right-4 {
    margin-right: 33.33333333%;
  }
  .offset-lg-right-3 {
    margin-right: 25%;
  }
  .offset-lg-right-2 {
    margin-right: 16.66666667%;
  }
  .offset-lg-right-1 {
    margin-right: 8.33333333%;
  }
  .offset-lg-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .offset-xl-right-12 {
    margin-right: 100%;
  }
  .offset-xl-right-11 {
    margin-right: 91.66666667%;
  }
  .offset-xl-right-10 {
    margin-right: 83.33333333%;
  }
  .offset-xl-right-9 {
    margin-right: 75%;
  }
  .offset-xl-right-8 {
    margin-right: 66.66666667%;
  }
  .offset-xl-right-7 {
    margin-right: 58.33333333%;
  }
  .offset-xl-right-6 {
    margin-right: 50%;
  }
  .offset-xl-right-5 {
    margin-right: 41.66666667%;
  }
  .offset-xl-right-4 {
    margin-right: 33.33333333%;
  }
  .offset-xl-right-3 {
    margin-right: 25%;
  }
  .offset-xl-right-2 {
    margin-right: 16.66666667%;
  }
  .offset-xl-right-1 {
    margin-right: 8.33333333%;
  }
  .offset-xl-right-0 {
    margin-right: 0;
  }
}

Answer 6

WeNeigh के जवाब के आधार पर ! यहाँ एक कम उदाहरण है

.col-offset-right(@i, @type) when (@i >= 0) {
    .col-@{type}-offset-right-@{i} {
        margin-right: percentage((@i / @grid-columns));
    }
    .col-offset-right(@i - 1, @type);
};
.col-offset-right(@grid-columns, xs);
.col-offset-right(@grid-columns, sm);
.col-offset-right(@grid-columns, md);
.col-offset-right(@grid-columns, lg);

Answer 7

आपको कई वर्गों को संयोजित करने की आवश्यकता है ( col-*-offset-*बाएं-मार्जिन के लिए और col-*-pull-*इसे दाएं खींचने के लिए)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-3 col-xs-offset-9">
      I'm a right column
    </div>
    <div class="col-xs-3">
      We're
    </div>
    <div class="col-xs-3">
      four columns
    </div>
    <div class="col-xs-3">
      using the
    </div>
    <div class="col-xs-3">
      whole row
    </div>
    <div class="col-xs-3 col-xs-offset-9 col-xs-pull-9">
      I'm a left column
    </div>
    <div class="col-xs-3">
      We're
    </div>
    <div class="col-xs-3">
      four columns
    </div>
    <div class="col-xs-3">
      using the
    </div>
    <div class="col-xs-3">
      whole row
    </div>
  </div>
</div>

इसलिए आपको इसे अलग-अलग पंक्तियों में मैन्युअल रूप से अलग करने की आवश्यकता नहीं है।

Answer 8

रुखान की तुलना में यहाँ एक ही समाधान है लेकिन विशेष केस के लिए sass (अपने ग्रिड कॉन्फ़िगरेशन को रखने के लिए) में रॉस एलन समाधान (जब आपके पास माता-पिता नहीं हो सकते।)

@mixin make-grid-offset-right($class) {
    @for $index from 0 through $grid-columns {
        .col-#{$class}-offset-right-#{$index} {
            margin-right: percentage(($index / $grid-columns));
        }
    }
}

@include make-grid-offset-right(xs);

@media (min-width: $screen-sm-min) {
  @include make-grid-offset-right(sm);
}

@media (min-width: $screen-md-min) {
  @include make-grid-offset-right(md);
}

@media (min-width: $screen-lg-min) {
  @include make-grid-offset-right(lg);
}

Answer 9

<div class="row col-xs-12">            
            <nav class="col-xs-12 col-xs-offset-7" aria-label="Page navigation">
                <ul class="pagination mt-0">                   
                    <li class="page-item">                        
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" asp-for="search" class="form-control" placeholder="Search" aria-controls="order-listing" />

                                <div class="input-group-prepend bg-info">
                                    <input type="submit" value="Search" class="input-group-text bg-transparent">                                   
                                </div>
                            </div>
                        </div>
                    </li>
                   
                </ul>
            </nav>
        </div>