ブートストラップフォームインライン入力入力の全幅

<div className="form-inline"> 
    <label>1.</label><br /> 
    <input type="text" className="form-control" /> 
</div>

ブートストラップを使用すると、入力を100％入力するとフォームが壊れますか？ https://jsfiddle.net/bdw9eyme/ブートストラップフォームインライン入力入力の全幅

ラベルと入力を同じ行にして入力する方法は、画面の残りの部分を埋めるでしょうか？

出典

2017-03-05 Mellisa

ポスト残りの探しているものだと思います。 –

@Dražen他に何が必要ですか？私はラベルと入力が同じ行にならない理由を尋ねます。 – Mellisa

ここではブレークを作成するためにbrを使用しないでください。CSSを使用することができます。 inputをlabelにネストするか、labelのfor属性を使用してinputのidにリンクする必要があります。

labelテキストでinputを入れ、inputが使用可能なスペースを取るために育つようになりますflex-grow: 1からinputセットで行flexを作ります。

input { 
 
    flex-grow: 1; 
 
    margin-left: 1em; 
 
} 
 
.fw { 
 
    display: flex; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css" rel="stylesheet"/> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div className="form-inline"> 
 
    <label class="fw">1. <input type="text" className="form-control"></label> 
 
</div>

出典

2017-03-05 16:40:07

私は、これは、フォームの

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
<div class="form-group"> 
 
    <label class="col-xs-2">1.</label> 
 
    <div class="col-xs-10"> 
 
    <input class="form-control" type="text"/> 
 
    </div> 
 
</div> 
 
</body>

出典

2017-03-05 16:43:59

ブートストラップフォームインライン入力入力の全幅

答えて

関連する問題