引導col-md-x嵌套在col-md-x中

Question

我想在col-md-x中立即嵌套col-md-x是錯誤的，在Bootstrap 3中。對嗎？

我在此刻以下內容：

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/> 
 

 

 
<div class="row"> 
 
    <input class="col-md-4" value="something" /> 
 
    <div class="col-md-8">Something here</div> 
 
</div>

在這種情況下，輸入邊界開始在該行的開始。它的外面沒有任何填充。 我希望輸入顯示距行邊界15px。我知道如何實現這一點的方法是將此輸入放入col-md-x中。但是，這可能會導致任何問題？

Answer 1

啊，只寫標記的方式有點不同，像這樣：

<div class="row"> 
    <div class="col-md-4"> 
     <input class="form-control" value="something" /> 
    </div> 
    <div class="col-md-8"> 
     <p class="form-control-static">Something here</p> 
    </div> 
</div> 

的問題是把col-md-4類的輸入。

Answer 2

從bootstrap docs：

要嵌套您的內容與默認網格，現有.COL-SM-*列中添加一個新的.row並設置 .COL-SM- *列。

所以只要你在子行內嵌套，你會沒事的。另一種選擇是爲你的嵌套結構定製css規則和id來實現所需的填充或邊距。

UPDATE

要引用您的評論，因爲這是有關驗證狀態：讓我補充一點，自舉已經提供了巨大的validation-highlighting。看到這個快速樣本。表單上的bootstrap文檔提供了有關此主題的詳細文檔。至於填充：我喜歡把我的大部分「不在線」的形式爲.well，這說明用戶，當需要採取行動，允許的形式一致的造型......

var resetSec = function(){ 
 
    $('#sth-form-section').removeClass('has-error'); 
 
    $('#sth-form-section').removeClass('has-warning'); 
 
    $('#sth-form-section').removeClass('has-success'); 
 
    $('#helpBlock-sth').addClass('sr-only'); 
 
    $('#helpBlock-sth').html(''); 
 
}; 
 

 
$('#invalid').click(function(){ 
 
    resetSec(); 
 
    $('#sth-form-section').addClass('has-error'); 
 
    $('#helpBlock-sth').removeClass('sr-only'); 
 
    $('#helpBlock-sth').html('Oh snap! Better think about this one more time!'); 
 
}); 
 

 
$('#valid').click(function(){ 
 
    resetSec(); 
 
    $('#sth-form-section').addClass('has-success'); 
 
    $('#helpBlock-sth').removeClass('sr-only'); 
 
    $('#helpBlock-sth').html('Well done! I think your input was the best so far!'); 
 
}); 
 

 

 
$('#reset').click(function(){ 
 
    resetSec(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="well"> 
 
    <form class="form-horizontal" role="form"> 
 
     <div id="sth-form-section" class="form-group"> 
 
      <label for="something" class="col-lg-2 control-label">Something:</label> 
 
      <div class="col-lg-10"> 
 
       <input type="text" class="form-control" id="something" placeholder="Something here"> 
 
       <span id="helpBlock-sth" class="help-block sr-only"></span> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <div class="col-lg-offset-2 col-lg-10"> 
 
       <button type="submit" class="btn btn-default">Submit</button> 
 
      </div> 
 
     </div> 
 
    </form> 
 
</div> 
 

 
<button class="btn btn-primary" id="reset">Reset</button> 
 
<button class="btn btn-danger" id="invalid">Invalid</button> 
 
<button class="btn btn-success" id="valid">Valid</button>