如何使Bootstrap输入框的宽度完全占用父容器的宽度？

Question

如何使Bootstrap输入框的宽度完全占用父容器的宽度？

csstwitter-bootstrap

66

如何使Bootstrap输入框的宽度与其父元素完全相同？

正如steve-obrien在 Bootstrap Issue #1058中所写：

将宽度设置为100%时，直接应用于输入框时会因为没有考虑填充而不起作用。因此，您最终会得到容器的100％加上输入框上的填充，因此输入框通常会超出其容器。

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

- David J.

9个回答

22

只需要添加box-sizing属性：

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

- LaundroMatt

4

为我工作 - Thang Nguyen

1

{ width: 100%; box-sizing: border-box; } 对我起作用了。 - aalaap

10

如果您使用 C# ASP.NET MVC 的默认模板，您可能会发现 site.css 覆盖了一些 Bootstrap 样式。如果您想像我一样使用 Bootstrap，让 Microsoft 不知不觉地覆盖这些样式可能会带来很大的挫败感！随意删除任何不需要的样式...

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

- Dave

8

For anyone Googling this, one suggestion is to remove all the input-group class instances. Worked for me in a similar situation. Original code:

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

New code:

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

- kurdtpage

5

我找到了一个在我的情况下有效的解决方案：

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

您只需要覆盖设置为100%和important的min-width，结果如下所示：

如果您不应用它，您将始终得到这个：

- Federico Navarrete

3

为了达到所需的结果，您必须将“box-sizing:border-box”设置为默认值“box-sizing:content-box”的相反值。这正是您所提到的问题（来自MDN）：

content-box

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

border-box

宽度和高度属性包括内容、填充和边框，但不包括外边距。

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

该 CSS 的兼容性良好。

- nh43de

2

如果您想要父元素占据整个视口的宽度，跨越整个宽度，请使用.container-fluid。

- Kvlknctk

1

这个方案可以解决问题，但它会给父级 div 添加左右内边距，这肯定不是我们想要的。因此，你可以在 class .container-fluid 之外再添加类 .px-0 来移除这些填充，但更好的选择是仅给 div 添加单一类 .w-100。 - legibe

0

怎么样？

    input[type="text"] {
          max-width:none;
   }

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

input,select,textarea {
max-width: 280px;}

- Piotr Knut

-1

只需添加：

width: 100% !important;

- vhstrejo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David J. · Accepted Answer

input-block-level类对我来说在各种屏幕宽度下都适用得很好。它由Bootstrap中的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
}

这与“assembler”在他在问题＃1058上的评论中建议的样式非常相似。