css - Bootstrapでborderを使う方法

Question

どうすればこの問題を解決できますか? div に境界線を追加すると、div は中央に配置されず、span12クラスも中央に配置されません。

境界線でdivを中央に配置したい

<div class="row" >
   <div class="span12" style="border: 2px solid black">
      <div class="row">
         <div class="span4">
            1
         </div>
         <div class="span4">
            2
         </div>
         <div class="span4">
            3
         </div>
      </div>
   </div>
</div>

score 77 · Accepted Answer

残念ながら、それがボーダーの機能であり、要素が占めるスペースの一部としてカウントされます。ボーダーのあまり知られていない従兄弟を紹介させてください: outline. それは国境と実質的に同じです。唯一の違いは、レイアウトのスペースを占有せず、要素の 4 つの側面すべてに配置する必要があるという点で、box-shadow のように動作することです。

http://codepen.io/cimmanon/pen/wyktr

.foo {
    outline: 1px solid orange;
}

score 17 · Accepted Answer

CSSbox-sizing.には、ページ上の要素の合計幅を決定するというプロパティがあります。デフォルト値はですcontent-box。これには、要素のパディング、マージン、または境界線は含まれません。

したがって、を設定しdivてすべての周りwidth: 500pxに20pxパディングを設定すると540px、Webサイト（500 + 20 + 20）で使用されます。

これが問題の原因です。Bootstrapは、上記の例のように設定された幅を計算しますが、これらには境界線がありません。Bootstrapはパズルのようにぴったり合うので、片側に境界線を追加すると、合計幅が501pxになり（上記の例を続ける）、レイアウトが壊れます。

これを修正する最も簡単な方法は、を調整することbox-sizingです。使用する値はですbox-sizing: border-box。これには、ボックス要素のパディングと境界線が含まれます。ボックスサイズについて詳しくは、こちらをご覧ください。

このソリューションの問題は、IE8+でのみ機能することです。したがって、より深いIEサポートが必要な場合は、境界を考慮してブートストラップ幅をオーバーライドする必要があります。

新しい幅を計算する方法の例を示すために、Bootstrapが要素に設定する幅を確認することから始めます。span6それがaであり、幅がであるとしましょう320px（これは純粋に仮説であり、span6の実際の幅はBootstrapの特定の構成によって異なります）。右側に20pxのパディングを使用して単一の境界線を追加する場合は、このCSSをスタイルシートに記述します。

.span6 {
  padding-right: 20px;
  border-right: 1px solid #ddd;
  width: 299px;
 }

ここで、新しい幅は次のように計算されます。

old width - padding - border

score 9 · Accepted Answer

必要なサイズに応じてdiv、Bootstrap の組み込みコンポーネントthumbnailクラスをグリッドシステムと共に (またはグリッドシステムなしで) 利用して、各divアイテムの周囲に境界線を作成できます。

Bootstrap の Web サイトにあるこれらの例CSSは、使いやすさと特別な追加の必要がないことを示しています。

<div class="row">
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="..." alt="...">
        </a>
    </div>
    ...
</div>

これにより、次のdivグリッドアイテムが生成されます。

または追加のコンテンツを追加します。

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p>
            <a href="#" class="btn btn-primary" role="button">Button</a>
            <a href="#" class="btn btn-default" role="button">Button</a>
       </p>
      </div>
    </div>
  </div>
</div>

これにより、次のdivグリッドアイテムが生成されます。

score 7 · Accepted Answer

ボーダーとボーダーボックスについて他の人が述べたことは間違いなく正しいです。ただし、カスタムクラスを作成しなくても、これを機能させることができます: http://jsfiddle.net/panchroma/yfzdD/

HTML

<div class="container">
<div class="row" >
    <div class="span12">
       <div class="row">
        <div class="span4"> 1 </div>
        <div class="span4"> 2 </div>
        <div class="span4"> 3 </div>
        </div><!-- end nested row -->
    </div><!-- end span 12 -->

</div> <!-- end row -->
</div><!-- end container -->

CSS

.span12{
border:solid 2px black;
background-color:grey;  
}

幸運を！

score 6 · Accepted Answer

おそらくそれを行う正しい方法ではありませんが、簡単な回避策であることがわかったのは、境界線ではなくボックスシャドウを使用することです...これはグリッドシステムを壊しません。たとえば、あなたの場合：

HTML

<div class="container">
    <div class="row" >
        <div class="span12">
            <div class="row">
                <div class="span4">
                    1
                </div>
                <div class="span4">
                    2
                </div>
                <div class="span4">
                    3
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.span12{
    -moz-box-shadow: 0 0 2px black;
    -webkit-box-shadow: 0 0 2px black;
    box-shadow: 0 0 2px black;
}

フィドル

score 5 · Accepted Answer

幅の計算方法が原因でレイアウトが壊れるため、スパンに境界線を追加することはできません。幅 = 境界線 + パディング + 幅。コンテナーが 940px でスパンが 940px であるため、2px の境界線 (合計 4px) を追加すると、中心がずれて見えます。回避策は、幅を変更して 4px の境界線 (オリジナル - 4px) を含めるか、内部に 2px の境界線を作成する別の div を含めることです。

score 0 · Accepted Answer

Bootstrap 4以降を使用している場合は、これを試して空のdivの周りに境界線を配置してください。これborder border-primaryは私のコードの例です:

<div class="row border border-primary">
        <div class="col border border-primary">logo</div>
        <div class="col border border-primary">navbar</div>
    </div>

Bootstrap 4 の境界ユーティリティへのリンクは次のとおりです: https://getbootstrap.com/docs/4.2/utilities/borders/

css - Bootstrapでborderを使う方法

9 に答える 9

Related

Reference