सवाल बूटस्ट्रैप 3 ऑफसेट दाएं नहीं छोड़े गए


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

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


76
2017-12-12 02:34


मूल




जवाब:


बूटस्ट्रैप पंक्तियों में हमेशा उनकी फ्लोट होती है और नई लाइनें होती हैं। आपको खाली कॉलम भरने की चिंता करने की आवश्यकता नहीं है, बस सुनिश्चित करें कि वे 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>


83
2017-12-12 06:43



पिछले महीने चलने योग्य कोड स्निपेट पेश किए गए थे। स्टैक ओवरफ्लो का ब्लॉग पोस्ट बताता है कि उनका उपयोग कैसे करें: blog.stackoverflow.com/2014/09/... - Ross Allen
रिक्त कॉलम के लिए, बूटस्ट्रैप का उपयोग करें col-X-pull-Y कक्षाएं। उदाहरण के लिए, दाईं ओर 50% आकार का कुछ धक्का देने के लिए, दाईं ओर एक कॉलम स्पेस को छोड़ दें (एक उदाहरण के रूप में 12-कॉलम ग्रिड में): col-xs-6 pull-right col-xs-pull-1 - James Cushing


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

.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;
  }
}

74
2017-12-16 09:13



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


मैंने बूटस्ट्रैप 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.scss उत्पन्न करने के लिए offset-right कक्षाएं।

// विशिष्ट वर्ग के लिए ग्रिड बनाएं
@ मिक्सीन मेक-ग्रिड ($ वर्ग) {
  @ अंतर्निहित फ्लोट-ग्रिड-कॉलम ($ वर्ग);
  @include लूप-ग्रिड-कॉलम ($ ग्रिड-कॉलम, $ वर्ग, चौड़ाई);
  @include लूप-ग्रिड-कॉलम ($ ग्रिड-कॉलम, $ वर्ग, पुल);
  @include लूप-ग्रिड-कॉलम ($ ग्रिड-कॉलम, $ वर्ग, पुश);
  @include लूप-ग्रिड-कॉलम ($ ग्रिड-कॉलम, $ कक्षा, ऑफ़सेट);
   @include लूप-ग्रिड-कॉलम ($ ग्रिड-कॉलम, $ कक्षा, ऑफ़सेट-दाएं);
}

फिर आप कक्षाओं का उपयोग कर सकते हैं col-sm-offset-right-2 तथा col-md-offset-right-1


15
2018-06-29 07:25



उपयोग के लिए +1 percentage मूल्यों को हार्डकोड करने के बजाय; यह बूटस्ट्रैप आंतरिक रूप से ग्रिड सिस्टम को कैसे संभालता है, इसके करीब है, और यदि डिफ़ॉल्ट 12 अवांछित है तो यह एक परिवर्तनीय ग्रिड कॉलम की अनुमति देता है। - Muhammad Abdul-Rahim
कृपया फ़ाइल नाम अपडेट करें mixins/_grid_framework.scss सेवा मेरे mixins/_grid-framework.scss आपके दूसरे पैराग्राफ में भी - Zanshin13


<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>


10
2018-06-02 06:44





पर आधारित 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);

0
2017-07-29 22:29





रुक्शन की तुलना में यह वही समाधान है, लेकिन विशेष मामले के लिए एसएएस (अपनी ग्रिड कॉन्फ़िगरेशन को रखने के लिए) जो रॉस एलन समाधान के साथ काम नहीं करते हैं (जब आपके पास पैरेंट div.row नहीं हो सकता है)

@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);
}

0
2017-07-29 10:36