Bootstrap输入的父容器的完全100％宽度？ [英] Perfect 100% width of parent container for a Bootstrap input?

问题描述

如何使Bootstrap输入字段与父字号一样宽？

How do I make a Bootstrap input field be exactly 100% as wide as its parent?

如steve-obrien在自杀问题＃1058 ：

As steve-obrien wrote in Bootstrap Issue #1058:

设置为100％在直接应用于输入字段时不工作，因为它不考虑填充。所以你最终得到100％的容器加上输入框上的填充，所以输入框通常会突破其容器外。

Setting to 100% does not work when applied directly to an input field as it does not take in to account the padding. So you end up with 100% of the container plus the padding on the input box, so the input box usually breaks outside its container.

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

That ticket offers various solutions, but I'm looking for the best way to do it -- preferably a CSS class already provided by Bootstrap.

推荐答案

应用输入块级类在各种屏幕宽度上对我非常有用。它由 Bootstrap在 mixins.less 如下：

Applying the input-block-level class works great for me, across various screen widths. It is defined by Bootstrap in mixins.less as follows:

// 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的评论中由'assembler'建议的样式。

This is very similar to the style suggested by 'assembler' in his comment on issue #1058.

这篇关于Bootstrap输入的父容器的完全100％宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！