blocks|key|223017|text|在不同的屏幕宽度上，应用input-block-level类对我来说非常有用。Bootstrap+in+mixins.less对其定义如下：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|223018|//+Block+level+inputs
.input-block-level+{
++display:+block;
++width:+100%25;
++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
}|code-block|syntax|javascript|223019|这与his+comment+on+issue+#1058中的“汇编”所建议的风格非常相似。|223020|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twitter/bootstrap/blob/master/less/mixins.less#L154|1|https://github.com/twitter/bootstrap/issues/1058#issuecomment-5110547^0|C|H|1G|B|13|O|0|0|0|2|Q|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|M|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

<p>Applying the <code>input-block-level</code> class works great for me, across various screen widths. It is defined by <a href="https://github.com/twitter/bootstrap/blob/master/less/mixins.less#L154">Bootstrap in <code>mixins.less</code></a> as follows:</p>

<pre><code>// 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
}
</code></pre>

<p>This is very similar to the style suggested by 'assembler' in <a href="https://github.com/twitter/bootstrap/issues/1058#issuecomment-5110547">his comment on issue #1058</a>.</p>


blocks|key|3088243|text|只需添加框大小：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3088244|input[type="text"]+{
++++box-sizing:+border-box;
}|code-block|syntax|javascript|3088245|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just add box-sizing:</p>

<pre><code>input[type="text"] {
    box-sizing: border-box;
}
</code></pre>


blocks|key|2874555|text|如果您使用的是C#+ASP.NET+MVC的默认模板，您可能会发现site.css覆盖了一些引导程序样式。如果你想使用Bootstrap，就像我一样，让M$覆盖这个(在你不知情的情况下)可能会让你非常沮丧！请随意删除任何不需要的样式...|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2874556|/*+Set+width+on+the+form+input+elements+since+they're+100%25+wide+by+default+*/
input,
select,
textarea+{
++++max-width:+280px;
}|code-block|syntax|javascript|2874557|entityMap^0|X|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>If you're using C# ASP.NET MVC's default template you may find that <strong>site.css</strong> overrides some of Bootstraps styles. If you want to use Bootstrap, as I did, having M$ override this (without your knowledge) can be a source of great frustration! Feel free to remove any of the unwanted styles...</p>

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


blocks|key|223137|text|对于Googling上的任何人来说，一个建议是删除所有的input-group类实例。在类似的情况下为我工作。原始代码：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|223138|​|223139|<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>|code-block|syntax|javascript|223140|📷|atomic|223141|223142|新代码：|223143|223144|<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>|223145|223146|223147|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/51072c4b94265bfa33ff42e2cad599c9.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/16f2f5ea62c147644a42c017ae161fab.png^0|S|B|0|0|0|0|1|0|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|O|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|P|3|G|5|6|7|1H|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1I|8|@]|D|@]|E|$]]|$1|S|3|G|5|6|7|1J|8|@]|D|@]|E|$]]|$1|T|3|U|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|V|3|N|5|O|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|W|3|G|5|6|7|1P|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14|15|-4]]|16|$5|10|11|12|E|$13|17|15|-4]]]]

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  &lt;div class="bs-callout"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="input-group"&gt;
            &lt;input type="text" class="form-control" name="time" placeholder="Time"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-8"&gt;
        &lt;div class="form-group"&gt;
          &lt;div class="input-group"&gt;
            &lt;select name="dtarea" class="form-control"&gt;
              &lt;option value="1"&gt;Option value 1&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="input-group"&gt;
        &lt;input type="text" name="reason" class="form-control" placeholder="Reason"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;</code></pre>
</div>
</div>

<a href="https://i.stack.imgur.com/ArDao.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ArDao.png" alt="With input-group"></a></p>

<p>New code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  &lt;div class="bs-callout"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
        &lt;div class="form-group"&gt;
          &lt;input type="text" class="form-control" name="time" placeholder="Time"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-8"&gt;
        &lt;div class="form-group"&gt;
          &lt;select name="dtarea" class="form-control"&gt;
            &lt;option value="1"&gt;Option value 1&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;input type="text" name="reason" class="form-control" placeholder="Reason"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;</code></pre>
</div>
</div>

<a href="https://i.stack.imgur.com/fIWXQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fIWXQ.png" alt="Without input-group"></a></p>


blocks|key|2874607|text|我找到了一个在我的案例中有效的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2874608|<input+class="form-control"+style="min-width:+100%25!important;"+type="text"+/>|code-block|syntax|javascript|2874609|您只需覆盖min+width+set+100%25和important，结果如下所示：|offset|length|style|BOLD|2874610|​|2874611|📷|atomic|2874612|2874613|如果你不应用它，你总是会得到这样的结果：|2874614|2874615|2874616|2874617|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/499524f160cc775a74de33eeda1dc13b.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/828b267083aa8d65758c5329f182bb11.png^0|0|0|5|9|J|4|O|9|0|0|0|1|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1A|8|@$I|1B|J|1C|K|L]|$I|1D|J|1E|K|L]|$I|1F|J|1G|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1H|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1I|8|@]|9|@$I|1J|J|1K|1|1L]]|A|$]]|$1|R|3|N|5|6|7|1M|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1N|8|@]|9|@]|A|$]]|$1|U|3|N|5|6|7|1O|8|@]|9|@]|A|$]]|$1|V|3|P|5|Q|7|1P|8|@]|9|@$I|1Q|J|1R|1|1S]]|A|$]]|$1|W|3|N|5|6|7|1T|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14|15|-4]]|16|$5|10|11|12|A|$13|17|15|-4]]]]

<p>I found a solution that worked in my case:</p>

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

<p>You only need to override the <strong>min-width</strong> set <strong>100%</strong> and <strong>important</strong> and the result is this one:</p>

<p><a href="https://i.stack.imgur.com/xyoqS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xyoqS.png" alt="enter image description here"></a></p>

<p>If you don't apply it, you will always get this:</p>

<p><a href="https://i.stack.imgur.com/EgYaA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EgYaA.png" alt="enter image description here"></a></p>


blocks|key|223219|text|为了得到想要的结果，你必须设置"box-sizing:+border-box“还是默认值"box-sizing:+content-box”。这正是您所指的问题(来自MDN)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|223220|内容框|223221|这是CSS标准指定的初始值和默认值。宽度和高度属性的测量仅包括内容，而不包括填充、边框或边距。|223222|边框|223223|宽度和高度属性包括内容、填充和边框，但不包括边距。“|223224|223225|参考：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing|offset|length|223226|这个CSS的兼容性很好。|223227|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing^0|0|0|0|0|0|0|3|1N|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|14|8|@]|9|@$M|15|N|16|1|17]]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>In order to get the desired result, you must set "box-sizing: border-box" vs. the default which is "box-sizing: content-box". This is precisely the issue you are referring to (From MDN):</p>

<h2>content-box</h2>

<p>This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin. </p>

<h2>border-box</h2>

<p>The width and height properties include the content, the padding and border, but not the margin."</p>

<hr>

<p>Reference: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing</a></p>

<p>Compatibility for this CSS is good.</p>


blocks|key|225358|text|如果要将全宽作为父对象，请使用.container-fluid，以跨越视口的整个宽度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|225359|entityMap^0|F|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Use <code>.container-fluid</code>, if you want to full-width as parent, spanning the entire width of your viewport.</p>


blocks|key|223149|text|关于?|type|unstyled|depth|inlineStyleRanges|entityRanges|data|223150|++++input[type="text"]+{
++++++++++max-width:none;
+++}|code-block|syntax|javascript|223151|检查某些css文件是否导致问题。默认情况下，bootstrap显示在整个宽度上。例如，在MVC目录中，内容是site.css，并且有一个约束宽度的定义。|223152|input,select,textarea+{
max-width:+280px;}|223153|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>What about?</p>

<pre><code>    input[type="text"] {
          max-width:none;
   }
</code></pre>

<p>Checking that some css file is causing problems. By default bootstrap displays over the entire width. For instance in MVC directory Content is site.css and there is a definition constraining width.</p>

<pre><code>input,select,textarea {
max-width: 280px;}
</code></pre>


blocks|key|3088251|text|只需添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3088252|width:+100%25+!important;|code-block|syntax|javascript|3088253|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>just add:</p>

<pre><code>width: 100% !important;
</code></pre>


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

<p>As steve-obrien wrote in <a href="https://github.com/twitter/bootstrap/issues/1058" rel="noreferrer">Bootstrap Issue #1058</a>:</p>

<blockquote>
  <p>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.</p>
</blockquote>

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


Perfect 100% width of parent container for a Bootstrap input?

容器

如何使Bootstrap输入字段的宽度恰好与其父字段的宽度相同？正如steve-obrien在中所写的那样当直接应用于输入字段时，设置为100%不起作用，因为它不考虑填充。所以你最终得到了100%的容器加上输入框上的填充，所以输入框通常会在它的容器之外断开。这张票提供了各种解决方案，但我正在寻找最好的方法--最好是Bootstrap已经提供的CSS类。

问对于Bootstrap输入来说，完美的100%宽度的父容器？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对于Bootstrap输入来说，完美的100%宽度的父容器？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对于Bootstrap输入来说，完美的100%宽度的父容器？
EN