2016-09-20 8 views
0

ボタンとプログレスバーの2つの入力要素を1行に整列しようとしています(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> 

答えて

1

トップレベルのdiv(または親<form>)にクラスform-inlineを追加します。

<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

+0

おかげでkeithjgrantです!。解決策は2つの入力要素とボタンのために働いていますが、プログレスバーは表示されません。 – Heisenberg

+1

@Heisenbergあなたは、[必須マークアップ](http://getbootstrap.com/components/#progress-basic)のいくつかがプログレスバーに欠けています。プログレスバーを構成する** 2つの** DIVがあります。 – hungerstar

+0

ありがとう@hungerstar。 – Heisenberg

関連する問題