Bootstrap輸入字段的縮進行爲

我有表單。在兩個輸入內部 - 日期和時間（分別使用ids resDate和resTime）。我不明白，爲什麼Bootstrap增加了對輸入的縮進？在這種情況下，爲什麼輸入字段與收音機和保留按鈕不在同一層？代碼是在這裏：http://codepen.io/socialodima/pen/zZrNMB Bootstrap輸入字段的縮進行爲

<input type="text" class="form-control" id="resDate" name="resDate" placeholder="Date"> 
<input type="text" class="form-control" id="resTime" name="resTime" placeholder="Time">

來源

2017-03-01 Dmytro

這是因爲所有的col-*值有一個CSS屬性padding-left:15px和padding-right:15px。包裝您的輸入的父母div.col-sm-10已經具有上述paddings及以上，即inputs被包裝在一個div中，其具有類別col-sm-4，其再次將更多padding添加到相同。因此，我建議您編寫自己的風格以從div中刪除填充或將它們保留在div.col-sm-4之外或者您可以刪除分配給div的類。我的建議是用額外CSS如下去除填充：

<div class="col-sm-10"> 
    <label class="control-label" for="resDate"></label> 
    <div class="col-sm-4 no-pad"> 
    <input type="text" class="form-control" id="resDate" name="resDate" placeholder="Date"> 
    <span class="glyphicon glyphicon-calendar form-control-feedback"></span> 
    </div> 
    <label class="control-label" for="resTime"></label> 
    <div class="col-sm-4 col-sm-offset-1 no-pad"> 
    <input type="text" class="form-control" id="resTime" name="resTime" placeholder="Time"> 
    <span class="glyphicon glyphicon-time form-control-feedback"></span> 
    </div> 
</div>

CSS

.no-pad{ 
    padding:0px; 
}

注意 - 我已經添加.no-pad類它包裝inputs

的div.col-sm-4這裏的Updated Pen

來源

2017-03-01 18:30:11

您的col-sm-4類正在向該字段的左側和右側添加填充。您可以使用CSS覆蓋它，或爲該字段創建另一個類或ID，並在填充左側指定0px。

.col-sm-4 { 
    padding-left: 0px !important; 
    padding-right: 0px !important; 
}

您應該爲此使用新的類或ID。

SolutionImage

來源

2017-03-01 18:30:31

Bootstrap輸入字段的縮進行爲

回答

相關問題