完美的100%宽度的父容器用于Bootstrap输入？

Question

如何使Bootstrap输入字段与其父字段完全相同？

正如史蒂夫 - 奥布莱恩在Bootstrap问题#1058中写道:

直接应用于输入字段时,设置为100%不起作用,因为它不考虑填充.因此,您最终得到100%的容器加上输入框上的填充,因此输入框通常会在容器外部打破.

该票提供了各种解决方案,但我正在寻找最好的方法 - 最好是已经由Bootstrap提供的CSS类.

Answer 1

应用该input-block-level课程对我来说非常适合各种屏幕宽度.它由Bootstrapmixins.less定义如下:

// Block level inputs
.input-block-level {
  display: block;
  width: 100%;
  min-height: 28px;        // Make inputs at least the height of their button counterpart
  .box-sizing(border-box); // Makes inputs behave like true block-level elements
}

这与'汇编'在他对问题#1058的评论中提出的风格非常相似.

Answer 2

只需添加盒子大小:

input[type="text"] {
    box-sizing: border-box;
}

Answer 3

如果您使用的是C#ASP.NET MVC的默认模板,您可能会发现site.css会覆盖一些Bootstraps样式.如果你想使用Bootstrap,就像我一样,让M $覆盖它(在你不知情的情况下)可能会让人非常沮丧!随意删除任何不需要的样式......

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Answer 4

对于Google上的任何人,一个建议是删除所有input-group类实例.在类似的情况下为我工作.原始代码:

<form>
  <div class="bs-callout">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" name="time" placeholder="Time">
          </div>
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-group">
          <div class="input-group">
            <select name="dtarea" class="form-control">
              <option value="1">Option value 1</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="input-group">
        <input type="text" name="reason" class="form-control" placeholder="Reason">
      </div>
    </div>
  </div>
</form>

新代码:

<form>
  <div class="bs-callout">
    <div class="row">
      <div class="col-md-4">
        <div class="form-group">
          <input type="text" class="form-control" name="time" placeholder="Time">
        </div>
      </div>
      <div class="col-md-8">
        <div class="form-group">
          <select name="dtarea" class="form-control">
            <option value="1">Option value 1</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row">
      <input type="text" name="reason" class="form-control" placeholder="Reason">
    </div>
  </div>
</form>

Answer 5

我找到了一种适用于我的情况的解决方案：

<input class="form-control" style="min-width: 100%!important;" type="text" />

您只需要覆盖最小宽度设置100％和重要，结果就是这样：

如果您不应用它，将始终得到以下信息：