1つのインライン行の入力を持つブートストラップ3の垂直形式

Question

2行目の入力がその間のラベルのインラインになるように、次のマークアップをどのように再構成する必要がありますか？私はdivで 'form-inline'を使用できるかもしれないと思ったが、正しいスタイリングを適用していないようだ。

http://bootply.com/80058

<div class="well"> 
    <form role="form"> 
     <div class="row"> 
      <fieldset> 
       <div class="form-group"> 
        <div class="col-md-12"> 
         <label for="address">To take me to</label> 
         <input type="text" name="address" id="address" class="form-control" placeholder="Enter a location" required> 
        </div> 
       </div> 
      </fieldset> 
     </div> 
     <div class="row"> 
      <fieldset> 
       <div class="form-group"> 
        <div class="col-md-12"> 
         <label for="date">Date &amp; Time</label> 
         <input type="text" name="date" id="date" placeholder="Enter a date" class="form-control" required> 
         <label for="time">@</label> 
         <input type="text" name="time" id="time" placeholder="Enter a time" class="form-control" required> 
        </div> 
       </div> 
      </fieldset> 
     </div> 
    </form> 
</div> 

私が欲しいのは

Take me to 
<Address> 

Date & Time 
<Date> @ <Time> 

しかし、そのように日付@時刻列の入力が応答膨張収縮有するような方法などで終わることです。彼らはまた、私は

Take me to 
<Address> 

Date & Time 
<Date> 
@ 
<Time> 

Answer 1

あなたは、フォーム・インラインを使用することができると思うことが正しいかで終わる小さな画面上のようCOL-MD-Nのように行動した場合、それはいいだろう

<div class="row form-inline"> 
     <fieldset> 
      <div class="col-md-12"> 
       <label for="date">Date &amp; Time</label> 
      </div> 
      <div class="form-group"> 
       <input type="text" required="" class="form-control" placeholder="Enter a date" id="date" name="date"> 
      </div> 
      <div class="form-group"> 
       <label for="time">@</label> 
      </div> 
      <div class="form-group"> 
       <input type="text" required="" class="form-control" placeholder="Enter a time" id="time" name="time">     
      </div> 
     </fieldset> 
    </div> 

Answer 2

次のソリューションは、ブートストラップ3と完璧に動作します：：

0123あなたはこのような何かをしたいです

フィールドの上にラベルを付けて、姓と名が並べて表示されます。

Answer 3

私はこの解決策を考え出しました。以下のスタイルを含め、フォームの行を次のように書式設定します。順序付けられていないリストを除外することができます。これは私のサイトに必要なものです。

<div class="form-group"> 
    <label>Date &amp; Time</label> 
    <ul class="list-unstyled"> 
     <li> 
      <div class="input-group"> 
       <span class="input-group-input-addon"><input class="form-control input" type="text" style="width: 100px;" placeholder="Enter a date" /></span> 
       <span class="input-group-addon">@</span> 
       <input class="form-control" type="text" placeholder="Enter a time" /> 
      </div> 
     </li> 
    </ul> 
    <a href="javascript:void(0);" class="btn btn-default btn-sm"> 
     <span><span class="glyphicon glyphicon-plus"></span> Add Material</span> 
    </a> 
</div> 


<style> 
@media (min-width: 768px) { 
    .form-inline .input-group .input-group-input-addon{ 
    width: auto; 
    } 
} 

.input-group > .input-group-input-addon > .input { 
    border-radius: 6px; 
} 

.input-group-lg > .input-group-input-addon > .input { 
    height: 46px; 
    padding: 10px 16px; 
    font-size: 18px; 
    line-height: 1.33; 
    border-radius: 6px; 
} 
select.input-group-lg > .input-group-input-addon > .input { 
    height: 46px; 
    line-height: 46px; 
} 
textarea.input-group-lg > .input-group-input-addon > .input, 
select[multiple].input-group-lg > .input-group-input-addon > .input { 
    height: auto; 
} 
.input-group-sm > .input-group-input-addon > .input { 
    height: 30px; 
    padding: 5px 10px; 
    font-size: 12px; 
    line-height: 1.5; 
    border-radius: 3px; 
} 
select.input-group-sm > .input-group-input-addon > .input { 
    height: 30px; 
    line-height: 30px; 
} 
textarea.input-group-sm > .input-group-input-addon > .input, 
select[multiple].input-group-sm > .input-group-input-addon > .input { 
    height: auto; 
} 
.input-group-input-addon { 
    display: table-cell; 
} 
.input-group-input-addon:not(:first-child):not(:last-child) > .input { 
    border-radius: 0; 
} 
.input-group-input-addon { 
    width: 1%; 
    white-space: nowrap; 
    vertical-align: middle; 
} 
.input-group-input-addon:first-child > .input { 
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0; 
} 
.input-group-input-addon:last-child > .input { 
    border-top-left-radius: 0; 
    border-bottom-left-radius: 0; 
} 
.input-group-input-addon { 
    position: relative; 
    font-size: 0; 
    white-space: nowrap; 
} 
.input-group-input-addon > .input { 
    position: relative; 
} 
.input-group-input-addon > .input + .input { 
    margin-left: -1px; 
} 
.input-group-input-addon > .input:focus, 
.input-group-input-addon > .input:active, 
.input-group > .form-control:focus, 
.input-group > .form-control:active { 
    z-index: 3; 
} 
.input-group-input-addon:not(:last-child) > .input { 
    margin-right: -1px; 
} 
.input-group-input-addon:last-child > .input { 
    margin-left: -1px; 
} 

@media (min-width: 768px) { 
    .navbar-form .input-group .input-group-input-addon { 
    width: auto; 
    } 
} 
</style>