Question

我认为将一个col-md-x立即嵌入Bootstrap 3中的col-md-x中是错误的。我是对的吗？

我现在关注：

<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

来自bootstrap docs：

要使用默认网格嵌套内容，请添加新的.row和set 现有.col-sm- *列中的.col-sm- *列。

因此，只要您在子行中嵌套，您就可以了。另一种选择是自定义css规则和嵌套结构的id，以实现所需的填充或边距。

<强>更新

要引用你的评论，因为这是关于验证状态：让我补充一点，bootstrap已经提供了很棒的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>

Answer 2

啊，只是稍微改写一下标记，就像这样：

<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类放在输入上。

Bootstrap col-md-x嵌套在col-md-x中

2 个答案: