Question

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

史蒂夫 - 奥布莱恩在Bootstrap Issue #1058写道：

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

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

Answer 1

应用input-block-level类对我来说非常适合各种屏幕宽度。它由Bootstrap in mixins.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
}

这与his comment on issue #1058中'assembler'建议的风格非常相似。

Answer 2

只需添加box-sizing：

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

Answer 3

对于任何人使用Google搜索，一个建议是删除所有input-group类实例。在类似的情况下为我工作。原始代码：

＆＃13 ;

＆＃13;

<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>

＆＃13;

新代码：

＆＃13;

<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>

＆＃13;

Answer 4

如果您正在使用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 5

我找到了一个适合我案例的解决方案：

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

您只需要覆盖 min-width 设置 100％和重要，结果就是这样：

如果你不申请，你将永远得到这个：

Answer 6

为了获得所需的结果，您必须设置＆＃34; box-sizing：border-box＆＃34;与默认值相比，＆＃34; box-sizing：content-box＆＃34;。这正是您所指的问题（来自MDN）：

内容框

这是CSS标准指定的初始值和默认值。测量宽度和高度属性仅包括内容，但不包括填充，边框或边距。

边界框

宽度和高度属性包括内容，填充和边框，但不包括边距。＆＃34;

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

此CSS的兼容性很好。

Answer 7

只需添加：

width: 100% !important;

Answer 8

怎么样？

DataGridView

检查某些css文件是否导致问题。默认情况下，bootstrap显示在整个宽度上。例如，在MVC目录中，Content是site.css，并且有一个限制宽度的定义。

TextBox

Answer 9

如果要以全角宽度作为父级，请使用.container-fluid，跨视口的整个宽度。

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

9 个答案:

内容框

边界框