web-dev-qa-db-ja.com

カスタマイズ方法Bootstrap=列幅？

これはありますが、サイドバーの幅に対して4は大きすぎ、3は小さすぎると感じます（合計で12になる必要があります）。

  <div class="col-md-8">
  <div class="col-md-4">

私はこれを試しましたが、うまくいきません：

  <div class="col-md-8.5">
  <div class="col-md-3.5">

同様の結果を得る別の方法はありますか？

ご協力いただきありがとうございます！

csstwitter-bootstrapmultiple-columnssidebar
26
AnthonyGalli.com

@isherwoodの答えを拡張するために、Bootstrap 3.3でカスタム-sm-幅を作成するための完全なコードを次に示します。

一般に、既存の列幅（たとえばcol-sm-3）を検索し、それに適用されるすべてのスタイル（一般的なものも含む）を、新しい列幅を定義するカスタムスタイルシートにコピーします。

.col-sm-3half, .col-sm-8half {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-sm-3half, .col-sm-8half {
        float: left;
    }
    .col-sm-3half {
        width: 29.16666667%;
    }
    .col-sm-8half {
        width: 70.83333333%;
    }
}
22
Tobia

12列のグリッドで、各列幅に列の半分（4,16667％）を追加する場合。これはあなたがすることです。

たとえば、col-md -[〜＃〜] x [〜＃〜]の場合、.col-md -X-5を次の値で定義します。

.col-md-1-5 { width: 12,5%; } // = 8,3333 + 4,16667
.col-md-2-5 { width: 20,83333%; } // = 16,6666 + 4,16667
.col-md-3-5 { width: 29,16667%; } // = 25 + 4,16667
.col-md-4-5 { width: 37,5%; } // = 33,3333 + 4,16667
.col-md-5-5 { width: 45,83333%; } // = 41,6667 + 4,16667
.col-md-6-5 { width: 54,16667%; } // = 50 + 4,16667
.col-md-7-5 { width: 62,5%; } // = 58,3333 + 4,16667
.col-md-8-5 { width: 70,83333%; } // = 66,6666 + 4,16667
.col-md-9-5 { width: 79,16667%; } // = 75 + 4,16667
.col-md-10-5 { width: 87,5%; } // = 83,3333 + 4,16667
.col-md-11-5 { width: 95,8333%; } // = 91,6666 + 4,16667

特定の値を丸めました。

次に、元のcol-md -[〜＃〜] x [〜＃〜]からcssコードをコピーしないようにするには、クラス宣言でそれらを使用します。追加する必要があることに注意してくださいbefore変更したもの。この方法では、幅のみがオーバーライドされます。

<div class="col-md-2 col-md-2-5">...</div>
<div class="col-md-5">...</div>
<div class="col-md-4 col-md-4-5">...</div>

最後に、合計が12列（合計100％）を超えないことを忘れないでください。

私はそれが役立つことを願っています！

16
Wawa Loo

確かに独自のクラスを作成できます：

.col-md-3point5 {width: 28.75%}
.col-md-8point5 {width: 81.25%;}

既定の列を台無しにする前に、これを行います。これらの内部でそれらを使用することもできます。

また、メディアクエリステートメント内にそれらを配置して、モバイルより大きい画面サイズにのみ適用されるようにすることもできます。

6
isherwood

Bootstrap独自の列ミックスインmake-xx-column()を使用できます。

.col-md-8half {
    .make-md-column(8.5);
}

.col-md-3half {
    .make-md-column(3.5);
}
5
Antoni

ブートストラップ4.1 +Antoniの答えのバージョン：

Bootstrap mixinは@include make-col($size, $columns: $grid-columns)になりました

.col-md-8half {
  @include make-col-ready();

  @include media-breakpoint-up(md) {
    @include make-col(8.5);
  }
}

.col-md-3half {
  @include make-col-ready();

  @include media-breakpoint-up(md) {
    @include make-col(3.5);
  }
}

ソース：

3
Mario Steingruber

bootstrap=スタイルシートを次のようにカスタマイズできます。

.col-md-8{
  width: /*as you wish*/;
}

次に、次のように、メディアクエリも設定します。

@media screen and (max-width:768px){
  .col-md-8{
     width:99%;
   }
}
1
Herman Nz