Bootstrap表單內聯輸入全寬

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

使用引導程序，爲什麼當我輸入100％時表單會打破？ https://jsfiddle.net/bdw9eyme/Bootstrap表單內聯輸入全寬

如何使標籤和輸入在同一行和輸入將填充屏幕的其餘部分？

來源

2017-03-05 Mellisa

形式的郵政休息。 –

@Dražen你還需要什麼？我只是問爲什麼標籤和輸入不能是同一行。 – Mellisa

您不應該使用br在這裏創建一箇中斷，您可以使用CSS。您還應該將input嵌套在label中，或使用for屬性和label鏈接到input上的id。

使該行flex與input設置爲flex-grow: 1會把input由label文本，使input成長佔用的可用空間。

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

Bootstrap表單內聯輸入全寬

回答

相關問題