如何分開卡住輸入框並在Twitter Bootstrap中相互提交按鈕？

以一種有趣的方式，提交按鈕粘貼到輸入框。我無法理解原因。我可以通過給予 - （減）餘量等來解決它。但是，我正在尋找永久的解決方案。我附上了chrome調試工具的截圖。如何分開卡住輸入框並在Twitter Bootstrap中相互提交按鈕？

enter image description here

我要對齊按鈕左側下方的選擇框。

如果你有困難，看到圖像...

http://i.stack.imgur.com/VhJVb.png

     <input class="reservationdates" type="text" name="date_from"/> 
         <label>Drop-off date</label> 
         <select name="to_time" class="reservationdates"> 
          <option value="07:00 am">07:00 AM</option> 
          <option value="07:30 am">07:30 AM</option> 
          <option value="08:00 am">08:00 AM</option> 
          <option value="08:30 am">08:30 AM</option> 
          <option value="09:00 am">09:00 AM</option> 
          <option value="09:30 am">09:30 AM</option> 
          <option value="10:00 am">10:00 AM</option> 
          <option value="10:30 am">10:30 AM</option> 
          <option value="11:00 am">11:000 AM</option> 
          <option value="11:30 am">11:30 AM</option> 
          <option value="12:00 pm">12:00 PM</option> 
          <option value="12:30 pm">12:30 PM</option> 
          <option value="01:00 pm">01:00 PM</option> 
          <option value="01:30 pm">01:30 PM</option> 
          <option value="02:00 pm">02:00 PM</option> 
          <option value="02:30 pm">02:30 PM</option> 
          <option value="03:00 pm">03:00 PM</option> 
          <option value="03:30 pm">03:30 PM</option> 
          <option value="04:00 pm">04:00 PM</option> 
          <option value="04:30 pm">04:30 PM</option> 
          <option value="05:00 pm">05:00 PM</option> 
          <option value="05:30 pm">05:30 PM</option> 
          <option value="06:00 pm">06:00 PM</option> 
          <option value="06:30 pm">06:30 PM</option> 
         </select> 


         <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy"> 
          <input class="span2" name="date_to" size="16" type="text" value="12-02-2012" readonly> 
          <span class="add-on"><i class="icon-th"></i></span> 
         </div> 


         <input class="span3 btn btn-large btn-primary" type="submit" name="submit" value="Search For Rates"/> 

        </form>

來源

2012-05-04 SNaRe

安置自己的標記來看一看。 –

@AndresIlich我發佈了。 – SNaRe

使用引導程序中的.control-group類，可以將輸入字段從輸入按鈕分隔成兩行。這個類增加了一些餘量到div的底部應該從你的輸入字段扯去您的按鈕：

演示：http://jsfiddle.net/MYjzj/

HTML

<form class="form-horizontal"> 
    <div class="control-group"> 
     <input class="reservationdates" type="text" name="date_from"/> 
     <label>Drop-off date</label> 
     <select name="to_time" class="reservationdates"> 
      <option value="07:00 am">07:00 AM</option> 
      <option value="07:30 am">07:30 AM</option> 
      <option value="08:00 am">08:00 AM</option> 
      <option value="08:30 am">08:30 AM</option> 
      <option value="09:00 am">09:00 AM</option> 
      <option value="09:30 am">09:30 AM</option> 
      <option value="10:00 am">10:00 AM</option> 
      <option value="10:30 am">10:30 AM</option> 
      <option value="11:00 am">11:000 AM</option> 
      <option value="11:30 am">11:30 AM</option> 
      <option value="12:00 pm">12:00 PM</option> 
      <option value="12:30 pm">12:30 PM</option> 
      <option value="01:00 pm">01:00 PM</option> 
      <option value="01:30 pm">01:30 PM</option> 
      <option value="02:00 pm">02:00 PM</option> 
      <option value="02:30 pm">02:30 PM</option> 
      <option value="03:00 pm">03:00 PM</option> 
      <option value="03:30 pm">03:30 PM</option> 
      <option value="04:00 pm">04:00 PM</option> 
      <option value="04:30 pm">04:30 PM</option> 
      <option value="05:00 pm">05:00 PM</option> 
      <option value="05:30 pm">05:30 PM</option> 
      <option value="06:00 pm">06:00 PM</option> 
      <option value="06:30 pm">06:30 PM</option> 
     </select> 
     <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy"> 
      <input class="span2" name="date_to" size="16" type="text" value="12-02-2012" readonly /><span class="add-on"><i class="icon-th"></i></span> 
     </div> 
    </div> 
    <input class="span3 btn btn-large btn-primary" type="submit" name="submit" value="Search For Rates"/> 
</form>

來源

2012-05-09 16:14:16

據我知道，分開提交按鈕引導輸入框使用「的形式行動'類，它通過按鈕添加填充和邊距。所以我認爲你在提供保證金方面的決定在某種程度上是正確的。嘗試將提交按鈕放入。但我可能是錯的。

來源

2012-05-04 16:56:10 Xella

如何分開卡住輸入框並在Twitter Bootstrap中相互提交按鈕？

回答

相關問題