Pertanyaan Bootstrap 3 offset di kanan tidak tersisa


Mengenai BS 3 jika saya hanya menginginkan kolom konten yang sempit di sebelah kanan saya mungkin menggunakan kelas offset 9 dan kolom 3.

Namun, bagaimana jika saya menginginkan yang sebaliknya dan di sisi kiri? Apakah ada cara yang tepat untuk melakukan ini di BS atau haruskah saya menggunakan metode CSS saya sendiri? Saya berpikir untuk membuat kolom 3 dengan konten saya dan hanya kolom kosong 9.


76
2017-12-12 02:34


asal


Jawaban:


Baris bootstrap selalu berisi pelampung dan membuat garis baru. Anda tidak perlu khawatir tentang mengisi kolom kosong, pastikan saja mereka tidak menambahkan hingga lebih dari 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



Saya menggunakan CSS khusus sederhana berikut yang saya tulis untuk mencapai ini.

.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



Saya memodifikasi Bootstrap SASS (v3.3.5) berdasarkan Jawaban Rukshan

Tambahkan ini di akhir calc-grid-column mixin in mixins/_grid-framework.scss, tepat di bawah $type == offset jika kondisi.

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

Ubah make-grid mixin in mixins/_grid-framework.scss untuk menghasilkan offset-right kelas.

// Buat kisi untuk kelas khusus
@mixin make-grid ($ class) {
  @sertakan float-grid-columns ($ class);
  @sertakan lingkaran-grid-kolom ($ grid-columns, $ class, width);
  @termasuk loop-grid-kolom ($ grid-columns, $ class, pull);
  @termasuk loop-grid-kolom ($ grid-columns, $ class, push);
  @termasuk loop-grid-kolom ($ grid-columns, $ class, offset);
   @termasuk loop-grid-kolom ($ grid-columns, $ class, offset-right);
}

Anda kemudian dapat menggunakan kelas seperti col-sm-offset-right-2 dan col-md-offset-right-1


15
2018-06-29 07:25



<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



Berdasarkan Jawaban WeNeigh! di sini adalah contoh KURANG

.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



Berikut adalah solusi yang sama dari Rukshan tetapi dalam sass (untuk menjaga konfigurasi grid Anda) untuk kasus khusus yang tidak bekerja dengan solusi Ross Allen (ketika Anda tidak dapat memiliki div.row orang tua)

@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