需要並排對齊引導元素

我想在一行中對齊兩個輸入元素，一個按鈕和一個進度條（CSS和引導程序的新增內容）。該按鈕不與輸入元素正確對齊。進度條甚至不顯示。我使用的html如下。需要並排對齊引導元素

<div class="form-group"> 
    <input type="text" class="form-control" placeholder="from"> 
    <input type="text" class="form-control" placeholder="to"> 
    <input type="submit" class="form-control btn btn-default" value="Route"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
</div>

來源

2016-09-20 Heisenberg

類form-inline添加到頂層的div（或父<form>）：

<div class="form-group form-inline"> 
    <input type="text" class="form-control" placeholder="from"> 
    <input type="text" class="form-control" placeholder="to"> 
    <input type="submit" class="form-control btn btn-default" value="Route"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
</div>

這裏的relevant documentation

來源

2016-09-20 17:28:26 keithjgrant

感謝keithjgrant！解決方案是爲兩個輸入元素和按鈕工作，但進度條仍然不顯示。任何想法？ – Heisenberg

@Heisenberg你錯過了一些[required markup]（http://getbootstrap.com/components/#progress-basic）進度條。有**兩個** DIV組成進度條。 – hungerstar

謝謝@hungerstar。 – Heisenberg

需要並排對齊引導元素

回答

相關問題