ブートストラップでcol-md-1.5を指定できますか？

TwitterBoοtstrapの列を調整したい。

ブートストラップには12列のグリッドがあることを知っています。3 3 33の代わりに1.53.5 3.5 3.5になるようにグリッドを操作する方法はありますか？

通りの@ bodi0が正しく言った、それは不可能です。Bootstrapのグリッドシステムを拡張するか（さまざまなソリューションを検索して見つけることができます。ここでは7列の例です）、ネストされた行（http://bootply.com/dd50he9tGeなど）を使用する必要があります。

ネストされた行の場合、常に正確な結果が得られるとは限りませんが、同様の結果が得られる場合があります。

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

クラウドは、列の幅を上書きするだけです...

<div class="col-md-1" style="width: 12.499999995%"></div>

以降col-md-1幅8.33333333％でした。8.33333333 * 1.5を掛けて、幅として設定するだけです。

ではbootstrap 4、flexプロパティとmax-widthプロパティもオーバーライドする必要があります。

<div class="col-md-1" style="width: 12.499999995%;
    flex: 0 0 12.499%;max-width: 12.499%;"></div>

簡単な答えはノーです（技術的には、クラスに任意の名前を付けることができますが、独自のCSSクラスを定義しない限り（そして覚えておいてください）、クラスセレクターにドットはありません）。Bootstrapには、デバイスまたはビューポートのサイズが大きくなるにつれて最大12列まで適切にスケールアップする、応答性の高いモバイルファースト流体グリッドシステムが含まれているため、長い答えは再びノーです。

適切な配置とパディングを行うには、行を.container（固定幅）または.container-fluid（全幅）内に配置する必要があります。

• 行を使用して、列の水平グループを作成します。
• コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます。
• 所定のグリッドクラスは好き.rowと.col-xs-4すぐに、グリッドレイアウトを作成するために用意されています。よりセマンティックなレイアウトには、より少ないミックスインを使用することもできます。
• 列は、パディングを介してガター（列の内容間のギャップ）を作成します。そのパディングは、の負のマージンを介して最初と最後の列の行でオフセットされます.rows。
• グリッド列は、スパンする12個の使用可能な列の数を指定することによって作成されます。たとえば、3つの等しい列は3つを使用します.col-xs-4。
• 1つの行内に12を超える列が配置されている場合、追加の列の各グループは、1つのユニットとして新しい行に折り返されます。
• グリッドクラスは、画面幅がブレークポイントサイズ以上のデバイスに適用され、小さいデバイスを対象としたグリッドクラスをオーバーライドします。したがって、たとえば.col-md-*、要素にクラスを適用すると、中規模のデバイスだけでなく、クラスが存在しない場合は大規模なデバイスでもそのスタイルに影響し.col-lg-*ます。

問題の考えられる解決策は、必要な幅で独自のCSSクラスを定義する.col-half{width:XXXem !important}ことです。たとえば、このクラスを元のBootstrapCSSクラスとともに必要な要素に追加します。

Bootstrap 4はflex-boxを使用しており、独自の列定義を作成できます

これは1.5に近く、自分のニーズに合わせて調整します。

.col-1-5 {
    flex: 0 0 12.3%;
    max-width: 12.3%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

幅を上書きする新しいクラスを作成します。動作するコードについては、jFiddleを参照してください。

<div class="row">
  <div class="col-xs-1 col-xs-1-5">
    <div class="box">
      box 1
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 2
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 3
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 4
    </div>
  </div>
</div>

.col-xs-1-5 {
  width: 12.49995%;
}
.col-xs-3-5 {
  width: 29.16655%;
}
.box {
  border: 1px solid #000;
  text-align: center;
}

Bootstrap 3で他に言及されているように、ネスト/埋め込み手法を使用できます。

ただし、Bootstrap4の非常に優れた機能を使用することが明らかになりつつあります。col-{breakpoint}-autoクラス（例col-md-auto）を使用して、コンテンツの自然な幅に基づいて列のサイズ自体を自動的に作成するオプションがあります。たとえばこれを確認してください

Rex Bloomの回答によると、私はブートストラップヘルパーを作成しました。

//8,33333333% col-1

.extra-col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-0-5 {
  @extend .extra-col;
  flex: 0 0 4.16666667%;
  max-width: 4.16666667%;
}

.col-1-5 {
  @extend .extra-col;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-2-5 {
  @extend .extra-col;
  flex: 0 0 20.833333325%;
  max-width: 20.833333325%;
}

.col-3-5 {
  @extend .extra-col;
  flex: 0 0 29.166666655%;
  max-width: 29.166666655%;
}

.col-4-5 {
  @extend .extra-col;
  flex: 0 0 37.499999985%;
  max-width: 37.499999985%;
}

.col-5-5 {
  @extend .extra-col;
  flex: 0 0 45.833333315%;
  max-width: 45.833333315%;
}

.col-6-5 {
  @extend .extra-col;
  flex: 0 0 54.166666645%;
  max-width: 54.166666645%;
}

.col-7-5 {
  @extend .extra-col;
  flex: 0 0 62.499999975%;
  max-width: 62.499999975%;
}

.col-8-5 {
  @extend .extra-col;
  flex: 0 0 70.833333305%;
  max-width: 70.833333305%;
}

.col-9-5 {
  @extend .extra-col;
  flex: 0 0 79.166666635%;
  max-width: 79.166666635%;
}

.col-10-5 {
  @extend .extra-col;
  flex: 0 0 87.499999965%;
  max-width: 87.499999965%;
}

.col-11-5 {
  @extend .extra-col;
  flex: 0 0 95.8333333%;
  max-width: 95.8333333%;
}

ブートストラップには列オフセットがあるため、サイズを指定せずに同じ幅の列が必要な場合は、これを使用します。

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

このリンクもチェックしてください https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints

これはcol-md-1.5を提供するBootstrapStandardではなく、正しい方法ではないため、bootstrap.min.cssを編集することはできません。このように作成できますhttp://www.bootply.com/125259

このコードはcol-md-3、col-md-9内で使用できます

.col-side-right{
  flex: 0 0 20% !important;
  max-width: 20%;
}

.col-side-left{
  flex: 0 0 80%;
  max-width: 80%;
}

この質問はかなり古いですが、私はそのようにしました（TYPO3で）。

まず、すべてのコンテンツ要素で手動で選択できる独自のアクセス可能なcssクラスを作成しました。

次に、11列（1-9-1）の外側の3列要素を作成し、最後に、CSSを使用して1列目と3列目の列幅を12.499999995％に変更しました。