ডান বাম দিকে বুটস্ট্র্যাপ 3 অফসেট

93

বিএস 3 এর সাথে সম্পর্কিত আমি যদি ডানদিকে মাত্র একটি সংকীর্ণ কলাম চাইতাম তবে আমি 9 এর অফসেট ক্লাস এবং 3 এর একটি কলাম ব্যবহার করতে পারি।

যাইহোক, যদি আমি বিপরীতটি চাই এবং বাম দিকে চাই? বিএসে এটি করার কোনও সঠিক উপায় আছে বা আমার নিজের সিএসএস পদ্ধতিগুলি ব্যবহার করা উচিত? আমি আমার সামগ্রীতে 3 টি কলাম এবং 9 এর খালি কলাম তৈরি করার কথা ভাবছিলাম।

twitter-bootstrap-3 
— ওয়ার্ক-টুগেদার ২০১৩
সূত্র

উত্তর:

95

বুটস্ট্র্যাপ সারিগুলিতে সর্বদা তাদের ভাসমান থাকে এবং নতুন লাইন তৈরি করে। ফাঁকা কলামগুলি পূরণ করার বিষয়ে আপনাকে চিন্তা করার দরকার নেই, কেবল নিশ্চিত করুন যে তারা 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>
স্নিপেট প্রসারিত করুন

— রস অ্যালেন
সূত্র
4
ফাঁকা কলামের জন্য, বুটস্ট্র্যাপের col-X-pull-Yক্লাসগুলি ব্যবহার করুন । উদাহরণস্বরূপ, 50% আকারের কোনও কিছুকে ডান দিকে ঠেলাতে তবে স্থানের একটি কলাম ডানদিকে রেখে দিন (উদাহরণস্বরূপ 12 কলামের গ্রিডে):col-xs-6 pull-right col-xs-pull-1
— জেমস কুশিং
এটি বাম দিকে রয়েছে কারণ আপনি ম্যানুয়ালি কন্টেন্টকে বিভিন্ন সারিতে বিভক্ত করেছেন। এবং যদি আপনি এগুলি অপসারণ করেন এবং নিম্নলিখিত সামগ্রীগুলি 100% প্রশস্ত না হয় (অর্থাত্ 50% প্রস্থের কিছু কলাম অনুসরণ করে col-xs-6) এটি আরও জোরে স্তূপিত হবে।
— কেপুল
আমি জানি না কেন এটি এত বেশি ভোট দিয়ে গৃহীত উত্তর, এটি প্রশ্নের উত্তর দেয় না, এখানে যা ঘটেছিল তা কর-এক্সএস -3 একটি সারিতে আবৃত হয়, যার কারণেই কোনও বিষয়বস্তু অবতরণ করেনি why একই লাইন / সারি যদি অন্য কোনও কল-এক্সএস -3 থাকে তবে এটি একই সারিতে 1 ম কোল-এক্সএস -3 এর ঠিক ঠিক পাশে থাকবে, সুতরাং এই উত্তরটি প্রশ্নের উত্তর দেয় না। কেপুল 1 এর উত্তর অনুরোধিত ফলাফল অর্জন করে।
— এনজেড দেব
82

এটি অর্জনের জন্য আমি লিখেছি নিম্নলিখিত সাধারণ কাস্টম সিএসএস ব্যবহার করছি।

.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;
  }
}
— রুকশন
সূত্র
4
শতাংশটি হার্ডকোডিং অত্যন্ত অ-আদর্শ। অতিরিক্তভাবে, বুটস্ট্র্যাপের গ্রিড সিস্টেম কীভাবে কাজ করে তা পরিবর্তন করা সম্ভব, সুতরাং আপনার 12 টি কলাম থাকার গ্যারান্টি নেই। এই উদাহরণে, এই উত্তরটি ব্যর্থ হয়। গ্রিড কলামগুলির সংখ্যার তুলনায় আপনি শতকরা শতাংশ গণনা করা ভাল।
— মুহাম্মদ আবদুল-রহিম
6
বুটস্ট্র্যাপ কেবল বাম থেকে একই কাজ করে
— স্কট
একটি মহান workaround! এটি অবশ্যই বুটস্ট্র্যাপে থাকতে হবে, আমি কখনই বুঝতে পারি নি যে তারা কেন যোগ করেনি
— ফারুকটি
15

আমি রুকশানের উত্তরের ভিত্তিতে বুটস্ট্র্যাপ 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

// নির্দিষ্ট শ্রেণীর জন্য গ্রিড তৈরি করুন
@ মিক্সিন মেক গ্রিড ($ শ্রেণি) {
  @ ফ্লোট-গ্রিড-কলাম ($ শ্রেণি) অন্তর্ভুক্ত করুন;
  @ লুপ-গ্রিড-কলামগুলি অন্তর্ভুক্ত করুন (id গ্রিড-কলাম, $ শ্রেণি, প্রস্থ);
  @ লুপ-গ্রিড-কলামগুলি অন্তর্ভুক্ত করুন (id গ্রিড-কলাম, $ শ্রেণি, টান);
  @ লুপ-গ্রিড-কলামগুলি অন্তর্ভুক্ত করুন ($ গ্রিড-কলাম, $ শ্রেণি, পুশ);
  @ লুপ-গ্রিড-কলামগুলি অন্তর্ভুক্ত করুন (id গ্রিড-কলাম, $ শ্রেণি, অফসেট);
  @ লুপ-গ্রিড-কলামগুলি অন্তর্ভুক্ত করুন (id গ্রিড-কলাম, $ শ্রেণি, অফসেট-ডান);
}

তারপরে আপনি col-sm-offset-right-2এবং এর মতো ক্লাসগুলি ব্যবহার করতে পারেনcol-md-offset-right-1

— WeNeigh
সূত্র
percentageমানগুলি হার্ডকডিংয়ের পরিবর্তে ব্যবহারের জন্য +1 ; এটি বুটস্ট্র্যাপ অভ্যন্তরীণভাবে গ্রিড সিস্টেম পরিচালনা করে এমন কি তার আরও কাছাকাছি, ডিফল্ট 12 অনাকাঙ্ক্ষিত হলে এটি একটি পরিবর্তনশীল গ্রিড কলামকে মঞ্জুরি দেয়।
— মুহাম্মদ আবদুল-রহিম
2

গুগল যেহেতু এই উত্তরটি পছন্দ করছে বলে মনে হচ্ছে ...

আপনি যদি বুটস্ট্র্যাপ 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;
  }
}
— মাইকেল স্টেনবার্গ
সূত্র
1

ওয়েইনইয়ের উত্তরের ভিত্তিতে ! এখানে একটি কম উদাহরণ

.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);
— ব্যবহারকারী1809033
সূত্র
1

আপনাকে একাধিক ক্লাস একত্রিত করতে হবে ( 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>
স্নিপেট প্রসারিত করুন

সুতরাং আপনাকে এটিকে বিভিন্ন সারিতে ম্যানুয়ালি আলাদা করার দরকার নেই।

— কেপুল 1
সূত্র
0

রক্ষনের চেয়ে একই সমাধান তবে স্যাসে (আপনার গ্রিড কনফিগারেশনটি রাখার জন্য) বিশেষ ক্ষেত্রে যা রস অ্যালেনের সমাধানের সাথে কাজ করে না (যখন আপনার পিতা বা মাতা ডিভ্রো থাকতে পারে না)

@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);
}
— tchiot.ludo
সূত্র
0 

<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>
স্নিপেট প্রসারিত করুন

— প্রকাশ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.