web-dev-qa-db-ja.com

ブートストラップでボーダーを使用する方法

この問題を解決するにはどうすればよいですか？ 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>
csstwitter-bootstrapborder
59
the_martux

残念ながら、それが境界線の役割であり、要素が占めるスペースの一部としてカウントされます。ボーダーのあまり知られていないいとこ：outlineを紹介させてください。ボーダーとほぼ同じです。唯一の違いは、レイアウトのスペースを占有せず、要素の4辺すべてに配置する必要があるという点で、ボックスシャドウのように動作することです。

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

.foo {
    outline: 1px solid orange;
}
74
cimmanon

Bootstrap 3以降、Panelクラスを使用できます。

<div class="panel panel-default">Surrounded by border</div>

32
Prague

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

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

これが問題の原因です。ブートストラップは、上記の例のように設定された幅を計算しますが、これらには境界線がありません。 Bootstrapはパズルのようにぴったりと収まるため、辺の1つに境界線を追加すると、合計幅が501ピクセルになり（上記の例を続けて）、レイアウトが崩れます。

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

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

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

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

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

old width - padding - border

17
jamesplease

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グリッド項目を生成します：

Simple grid objects

または追加のコンテンツを追加：

<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グリッド項目を生成します：

Custom grid objects

9
Blairg23

ボーダー対ボーダーボックスについて他の人が言ったことは間違いなく正しいです。ただし、カスタムクラスを作成しなくても、これを機能させることができます。 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;  
}

がんばろう！

7
David Taiaroa

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

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;
}

フィドル

6
brbcoding

幅の計算方法（幅=ボーダー+パディング+幅）によってレイアウトが壊れるので、スパンにボーダーを追加することはできません。コンテナは940pxで、スパンは940pxであるため、2pxの境界線（つまり4px）を追加すると、中央から外れたように見えます。回避策は、幅を変更して4pxボーダー（オリジナル-4px）を含めるか、2pxボーダーを作成する別のdivを内部に持つことです。

5
David Nguyen

基本的な境界線が必要な場合は、ブートストラップウェルを使用するだけです。

たとえば、次のコード：

<div class="well">Basic Well</div>
1
Khatx Albert