Twitterのブートストラップのボタンの水平と垂直の分離

Twitterのブートストラップのボタンを水平に分割する原因は何ですか？Twitterのブートストラップのボタンの水平と垂直の分離

enter image description here

私は、CSSのコードでそれを見つけることができません。

私は垂直のための非常に同じことを繰り返すようにしようとしているが、私がこれを達成するために失敗してるようです：私は、彼らは「場合にのみ、ボタンの間の垂直分離を追加することができますどのように

enter image description here

を縦に積み重ねられて（2枚目の写真）、同じ写真は避けてください（この場合は不要です）。

EDIT：コードは上の写真を生成するために使用される：

<div class="container-fluid"> 

    <div class="row-fluid"> 

     <div class="well well-small" id="menu-buttons"> 

      <div class="pull-left" style="width: 48%"> 

       <a class="btn btn-small">@ Style ^</a> 
       <a class="btn btn-small">@ Language ^</a> 

      </div> 

      <div class="pull-right text-right" style="width: 48%;"> 

       <a class="btn btn-small">@ Device</a> 
       <a class="btn btn-small">@ Webpage</a> 

      </div> 

      <div style="clear: both"></div> 

     </div> 

    </div> 

</div>

出典

2013-07-23 trejder

それが容易になるだろうあなたのコードを見せたら答えてください。私の推測では、これは浮動小数点と関係があるでしょうか？Webインスペクタから、 "@ Device"と "@ Webpage"ボタンにフロート値が定義されているかどうかを見てください。 – quinnirill

'div'のボタンを' inline-block'で囲みます。浮動小数点使用のためにそれが発生した場合 'clear：both ' – Praveen

@quinnirill：申し訳ありませんが、それを逃してしまいました。ここにはコードの更新された質問があります。 – trejder

はこのようなものです。この方法では、「全幅」スタイルは変更されず、「狭い」スタイルではボタン間に4ピクセルの間隔があります。

あなたはそれだけであなたの「＃メニュー・ボタン」で動作させるために、広告にそれらのセレクタの前に余分なIDまたは何かをしたいことがあり

そして例：http://jsfiddle.net/eHYnQ/

出典

2013-07-23 13:04:25 Pevara

男、あなたの解決策はロッキー！もう少しチェックをしてみましょうが、それは本当に有望です。 – trejder

私は、ブートストラップがマージントップのために何らかのクラスを持っていない理由を知りません –

あなたがボタンにmargin-bottomプロパティを追加することによってそれを行うことができます。最初の画像では、それはおそらくあなたは、次の上に構築しようとすることができmargin-right: 5px;

出典

2013-07-23 12:08:49

これは最初のことですが、私は考えていて動作しません。 'margin-bottom'を永久に追加すると（どちらの場合でも）、最初のケース（ボタンが垂直に積み重ねられていない場合）では、ボタンとその周囲のウェルのボトム境界の間に容認できない追加のスペースが生じます。 – trejder

とfloat: right;です：

#menu-buttons a:first-child { 
    margin-bottom: 3px; 
}

出典

2013-07-23 12:22:08 quinnirill

これはうまくいきません - 上記のアミンの答えに対する私のコメントを見てください。ボタンが縦に積み重ねられてもうまく動作しますが、積み重ねられていない場合は1行に2つのボタンが表示されます。 – trejder

時（セレクタは、あなたがそれについて何かを行う必要がありあからさまに固有のものです）あなたのコードをチェックすると、div内のボタンのペアをラップしています。

だからではなく、％値変更PX に

<div class="pull-left" style="width: 115px; "> <a class="btn btn-small">@ Style ^</a> 
<a class="btn btn-small">@ Language ^</a> 

</div> 
<div class="pull-right text-right" style="width: 115px;"> <a class="btn btn-small">@ Device</a> 
<a class="btn btn-small">@ Webpage</a> 

</div>

チェックこのJSFiddle

アップデート有するので：あなたは流体設計についてのコメントで述べたように、ここにありますHTMLで簡単に行う方法<br/>タグを使用して改行を取得します。

<div class="pull-left" style="width: 38% "> <a class="btn btn-small">@ Style ^</a> 
    <br/> <a class="btn btn-small">@ Language ^</a> 

</div> 
<div class="pull-right text-right" style="width: 38%"> <a class="btn btn-small">@ Device</a> 
    <br/> <a class="btn btn-small">@ Webpage</a> 

</div>

Updated Fiddle

出典

2013-07-23 12:48:30 Praveen

これは流体レイアウトです（ピクセルで絶対値を与えることは全くオプションではありません）（上のdivの 'container-fluid'と' row-fluid'クラス）サイドコメント：私はあなたのjsFiddleを開いて、両方のボタングループで垂直方向の分離を見ていません。 – trejder

@trejderあなたは私のjsfiddleが動作していないと確信していますか？ – Praveen

@trejder更新された回答を確認してください。 – Praveen

これは、水平方向のマージンが発生しrow-fluidクラスです。
row-fluidをrow fluidに設定すると、縦の間隔が得られます。
流体ネストでbootstrap - fluidGridSystemを参照してください。画面here
：

また、幅

フィドルを修正するために spanクラスを使用する必要があります。ここ

Screen capture

私のコードです：
警告フルスクリーンワイドのdiv

ため <div class="span3" style="background-color:whitesmoke">を削除します

<!Doctype html> 
<html> 
<head> 
    <link href="../css/bootstrap.css" type="text/css" rel="stylesheet" media="all"> 
</head> 
<body> 
     <div class="span3" style="background-color:whitesmoke"> 
      <div class="row-fluid"> 

       <div class="row-fluid"> 

        <div class="span6"> 
         <button>1</button> 
        </div> 
        <div class="span6"> 
         <button class="pull-right">2</button> 
        </div> 

       </div> 

       <div class="row-fluid"> 

        <div class="span6"> 
         <button>3</button> 
        </div> 
        <div class="span6"> 
         <button class="pull-right">4</button> 
        </div> 

       </div> 

      </div> 
     </div> 
</body> 
</html>

だから私は、各ボタンの周りに2ピクセルのマージンをaddedd、および2つのピクセルでコンテナ（.well）のパディングを削減

.btn { 
    margin: 2px; 
} 
.well { 
    padding: 7px; 
}

：私はどうなるのか

出典

2013-07-23 12:50:38 Done

私はあなたのコードを 'container-fluid'で囲んでいてもいなくても構いません。どちらの場合も、私はいくつかの奇妙な結果を見ています - それぞれのボタンは別々の行にあります。多分私は何かを欠いているでしょうか？これは私が探しているものではありません。結果は自分の写真に表示されたものとはまったく異なります。あなたは、あなたのソリューションが実際に動作するように、いくつかのフィドルを提示していますか？ – trejder

ああ、私は参照してください。あなたの魂は、ワイドスクリーン解像度で完璧に動作します。しかし、モバイルのものでは完全に失敗します。 – trejder

http://jsfiddle.net/TJUcg/ – Done

Twitterのブートストラップのボタンの水平と垂直の分離

答えて

関連する問題