web-dev-qa-db-ja.com

2つのBootstrap列の間にユーザー定義のギャップを作成します

インターフェイス用の小さなパネル/ダッシュボードを作成したいと思います。私の場合、そのような2つのパネルが必要です

+-------------------------------+    +-------------------------------+
|                               |    |                               |
|                               |    |                               |
+-------------------------------+    +-------------------------------+

一般的に、Bootstrap 3で簡単です。

<div class="row">
  <div class="col-md-5">
  </div>
  <div class="col-md-5 pull-right">
  </div>
</div>

問題は、ここにあるように、col-md-2のギャップが大きすぎることです。 col-md-1ギャップを使用することはできません。これは、両側のサイズが同じではないためです。

また、左右にパディングを追加しようとしましたが、効果もありませんでした。ここで何ができますか？

csstwitter-bootstraptwitter-bootstrap-3grid-layout
8
Max Rhan

col-md-6の幅を変更するクラスを追加できます。このクラスの幅は50%に設定されています。次のように幅を狭くすると、ギャップが小さくなります。

.dashboard-panel-6 {
   width: 45%;
}

これをdiv要素に追加します。このようにして、col-md-6の幅ルールが上書きされます。

<div class="row">
  <div class="col-md-6 dashboard-panel-6">...</div>
  <div class="col-md-6 dashboard-panel-6">...</div>
</div>
13
Konrad Reiche

内部で別のdivを使用して、それにパディングを与えることができます。

<div class="row">
  <div class="col-md-6">
    <div class="inner-div">
    </div>
  </div>
  <div class="col-md-6 pull-right">
    <div class="inner-div">
    </div>
  </div>
</div>

.inner-div{
   padding: 5px;
 }
6
kenttam

別の可能性があります：
ライブビュー
ビューの編集

2つのcol-md-6を使用し、それぞれにcol-md-11がネストされていることがわかります。ネストされた行は、右側の2番目のdivに配置されます。

Ken からの提案は、私が好きなクリーンなHTMLを持っています。左右のパネルで幅がBootstrap）で定義された要素を使用している場合（ウェルやフォーム要素など）、列のパディングによって面倒な作業が発生し、レイアウトが破損する可能性があります。このネストされたアプローチの方が簡単な場合があります。 。

[〜＃〜] html [〜＃〜]

<div class="container">
  <div class="row">

    <div class="col-md-6">
      <div class="row">
        <div class="col-md-11">nested row col-md-11</div>
      </div><!-- end nested row -->
    </div>

    <div class="col-md-6">
      <div class="row">
        <div class="col-md-11 col-md-offset-1">nested row col-md-11</div>
      </div><!-- end nested row -->
    </div>

  </div>
</div>

幸運を！

2
David Taiaroa

私はこれを投稿しました ここ すでにですが、それでも元の質問に関連しています。

列間のスペースについても同様の問題が発生しました。根本的な問題は、bootstrap 3と4の列がマージンの代わりにパディングを使用することです。したがって、2つの隣接する列の背景色が互いに接触します。

私たちの問題に適合し、列の間隔を空けてグリッドシステムの他の部分と同じガター幅を維持しようとするほとんどの人に役立つ可能性が高い解決策を見つけました。

これが私たちが目指していた最終結果でした

enter image description here

列の間にドロップシャドウのあるギャップがあると問題がありました。列の間に余分なスペースは必要ありませんでした。サイトの背景色が2つの白い列の間に表示されるように、側溝を「透明」にしたかっただけです。

これは2つの列のマークアップです

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

このアプローチでは、「row」クラスbootstrapが使用するように、負のマージンを持つ内部divが必要です。このdivは、「raised-block」と呼ばれ、列の直接の兄弟である必要があります。

このようにして、列内に適切なパディングを取得できます。スペースを作成することで機能するように見えるソリューションを見てきましたが、残念ながら、それらが作成する列には行の両側に余分なパディングがあるため、グリッドレイアウトが設計されたように行が細くなります。希望の外観で画像を見ると、これは、2つの列が一緒になって、グリッドの自然な構造を壊す上部の1つの大きな列よりも小さくなることを意味します。

このアプローチの主な欠点は、各列のコンテンツをラップする追加のマークアップが必要になることです。私たちにとってこれは、特定の列だけが目的の外観を実現するためにそれらの間にスペースを必要としたために機能します。

お役に立てれば

2
Joe Fitzgibbons