Soru Bootstrap 3 ofset sağda değil solda


BS 3 ile ilgili olarak, sağ tarafta sadece dar bir içerik sütunu istemiş olsaydım, 9'luk bir ofset sınıfı ve 3'lük bir sütun kullanabilirim.

Bununla birlikte, eğer tersi ve sol tarafta olsaydım? BS'de bunu yapmak için uygun bir yol var mı yoksa kendi CSS yöntemlerini kullanmalı mıyım? İçeriğimle 3 sütun oluşturmayı ve yalnızca 9 boş sütun oluşturmayı düşünüyordum.


76
2017-12-12 02:34


Menşei




Cevaplar:


Önyükleme satırları her zaman kendi şamandıralarını içerir ve yeni çizgiler oluşturur. Boş sütunları doldurmak için endişelenmenize gerek yok, sadece 12'den fazla ekleme yapmadıklarından emin olun.

<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



Runnable kod snippet'leri geçen ay tanıtıldı. Stack Overflow'un blog yazısı, bunları nasıl kullanacağınızı açıklar: blog.stackoverflow.com/2014/09/... - Ross Allen
Boş bir sütun için Bootstrap’i kullanın col-X-pull-Y sınıflar. Örneğin,% 50 boyutta bir şeyi sağa doğru itmek, ancak sağdaki bir sütun alanını bırakmak (örnek olarak 12 sütunlu bir ızgarada): col-xs-6 pull-right col-xs-pull-1 - James Cushing


Bunu gerçekleştirmek için yazdığım şu basit özel CSS'yi kullanıyorum.

.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



Yüzdeleri kodlamak çok ideal değildir. Ayrıca, Bootstrap'ın ızgara sisteminin nasıl çalıştığını değiştirmek mümkündür, bu yüzden 12 sütuna sahip olmanız garanti edilmez. Bu durumda, bu cevap başarısız olur. Izgara sütunlarının sayısına göre yüzdesini hesaplamaktan daha iyidir. - Muhammad Abdul-Rahim
bootstrap aynı şeyi sadece soldan yapar - Scott


Bootstrap SASS'ı (v3.3.5) temel alarak değiştirdim Rukshan'ın cevabı

Bunu sonuna ekle calc-grid-column karışmak mixins/_grid-framework.scss, hemen altında $type == offset eğer durum.

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

Değiştirmek make-grid karışmak mixins/_grid-framework.scss üretmek için offset-right sınıflar.

// Belirli bir sınıf için kılavuz oluştur
@mixin make-grid ($ sınıfı) {
  @ şamandıra-ızgara sütunları ($ class);
  @include loop-grid-columns ($ grid-columns, $ class, width);
  @include loop-grid-columns ($ grid-columns, $ class, pull);
  @include loop-grid-columns ($ grid-columns, $ class, push);
  @include loop-grid-columns ($ grid-columns, $ class, offset);
   @include loop-grid-columns ($ grid-columns, $ class, offset-right);
}

Daha sonra sınıfları kullanabilirsiniz col-sm-offset-right-2 ve col-md-offset-right-1


15
2018-06-29 07:25



Kullanmak için +1 percentage değerleri kodlamak yerine; Bu, Bootstrap'in dahili olarak ızgara sistemini nasıl işlediğine daha yakındır, artı 12 varsayılanı istenmiyorsa değişken bir kılavuz sütuna izin verir. - Muhammad Abdul-Rahim
lütfen dosya adını güncelle mixins/_grid_framework.scss için mixins/_grid-framework.scss ikinci paragrafınızda - 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





Dayalı WeNeigh'ın cevabı! İşte bir LESS örneğidir

.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





İşte Rukshan'dan aynı çözümdür ama sass'da (ızgara yapılandırmanızı korumak için) Ross Allen çözümüyle çalışmayan özel bir durum için (bir üst div.row'a sahip olamayacağınız zaman)

@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