ブートストラップのボタングループにラベルをインラインで挿入しようとしています

Question

私はウェブサイトの開発を継承しました。ブートストラップ入力フォームをよりコンパクトなレイアウトに変更する必要があるため、（ボタングループの代わりに）ボタングループを使用してラベルをインラインで表示するために、コードを修正しようとしました。私はこれで失敗し、私は奇妙な行動を理解することはできません。

以下のコード（https://jsfiddle.net/ewdt76zc/10/も可能）は、2つの異なる形式を示しています。最初のラベルは、ラベルの下に3つのボタンを表示します。 2番目の方法では、ラベルとボタングループが同じ行を共有することを望みました。しかし、それは失敗し、3つのボタンは非常に右にプッシュされ、実際には最小限に抑えられている...奇妙な！

私は次のようなレイアウトを実現したいと思います：

Company: [ Apple ][ Microsoft ][ Google ]

間違っているとどのように私はそれを解決することができますか？

<p><i>(label above radio buttons)</i></p> 
<form> 
    <div class="form-group"> 
    <label>Company</label> 
    <div class="btn-group btn-group-justified" data-toggle="buttons"> 
     <label class="btn btn-default form-control"> 
     <input type="radio">Apple 
     </label> 
     <label class="btn btn-default form-control"> 
     <input type="radio">Microsoft 
     </label> 
     <label class="btn btn-default form-control"> 
     <input type="radio">Google 
     </label> 
    </div> 
    </div> 
</form> 

<p><i>(label inline with radio buttons... buttons are compact to the right?)</i></p> 
<form> 
    <div class="form-group"> 
    <div class="btn-group btn-group-justified" data-toggle="buttons"> 
     <label>Company</label> 
     <label class="btn btn-default form-control"> 
     <input type="radio">Apple 
     </label> 
     <label class="btn btn-default form-control"> 
     <input type="radio">Microsoft 
     </label> 
     <label class="btn btn-default form-control"> 
     <input type="radio">Google 
     </label> 
    </div> 
    </div> 

Answer 1

あなたのラジオボタンフォームにクラス「フォームインライン」（または「フォーム・横」）を定義するために試してみてください。

お手数ですがお手伝いします。

Answer 2

display:flex〜form groupを使用して、必要に応じて選択したラベルに余白を追加することもできます。それがあなたに役立つことを願っています。我々は所望のレイアウトを実現することができる特定のパーセンテージを使用することにより

.form-group { 
 
display: flex; 
 
} 
 

 
label { 
 
margin-right: 20px; 
 
}

<p><i>(label above radio buttons)</i></p> 
 
<form> 
 
    <div class="form-group"> 
 
    <label>Company</label> 
 
    <div class="btn-group btn-group-justified" data-toggle="buttons"> 
 
     <label class="btn btn-default form-control"> 
 
     <input type="radio">Apple 
 
     </label> 
 
     <label class="btn btn-default form-control"> 
 
     <input type="radio">Microsoft 
 
     </label> 
 
     <label class="btn btn-default form-control"> 
 
     <input type="radio">Google 
 
     </label> 
 
    </div> 
 
    </div> 
 
</form> 
 

 
<p><i>(label inline with radio buttons... buttons are compact to the right?)</i></p> 
 
<form> 
 
    <div class="form-group"> 
 
    <div class="btn-group btn-group-justified" data-toggle="buttons"> 
 
     <label>Company</label> 
 
     <label class="btn btn-default form-control"> 
 
     <input type="radio">Apple 
 
     </label> 
 
     <label class="btn btn-default form-control"> 
 
     <input type="radio">Microsoft 
 
     </label> 
 
     <label class="btn btn-default form-control"> 
 
     <input type="radio">Google 
 
     </label> 
 
    </div> 
 
    </div>

Answer 3

。

デモ目的のために私はdemo-1 & demo-2クラスを作成しました。特定の幅をパーセンテージでそのクラスに適用し、そのクラスをlabel & btn-groupに追加しました。

.demo1 { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 10%; 
 
    padding-top: 4px; 
 
} 
 
.demo-2 { 
 
    display: inline-block !important; 
 
    float: left !important; 
 
    width: 90% !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<p><i>(label above radio buttons)</i></p> 
 
<form> 
 
    <div class="form-group"> 
 
    <label>Company</label> 
 
    <div class="btn-group btn-group-justified" data-toggle="buttons"> 
 
     <label class="btn btn-default form-control"> 
 
     <input type="radio">Apple 
 
     </label> 
 
     <label class="btn btn-default form-control"> 
 
     <input type="radio">Microsoft 
 
     </label> 
 
     <label class="btn btn-default form-control"> 
 
     <input type="radio">Google 
 
     </label> 
 
    </div> 
 
    </div> 
 
</form> 
 

 
<p><i>(label inline with radio buttons... buttons are compact to the right?)</i></p> 
 
<form> 
 
    <div class="form-group"> 
 
    <label class="demo1">Company</label> 
 
    <div class="btn-group btn-group-justified demo-2" data-toggle="buttons"> 
 
     
 
     <label class="btn btn-default form-control"> 
 
     <input type="radio">Apple 
 
     </label> 
 
     <label class="btn btn-default form-control"> 
 
     <input type="radio">Microsoft 
 
     </label> 
 
     <label class="btn btn-default form-control"> 
 
     <input type="radio">Google 
 
     </label> 
 
    </div> 
 
    </div> 
 
</form>