blocks|key|2748425|text|引导程序文档says+about+this|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2748426|2748427|要求自定义宽度输入、选择和文本区域在Bootstrap中默认为100%25宽。要使用内联表单，必须在其中使用的表单控件上设置宽度。|blockquote|2748428|2748429|2748430|如果您在表单上使用form-inline类，则所有表单元素在获取类form-control时的默认宽度100%25都不适用。|style|CODE|2748431|您可以查看bootstrap.css+(或.less，无论您喜欢什么)，您将在其中找到以下部分：|2748432|.form-inline+{

++//+Kick+in+the+inline
++@media+(min-width:+@screen-sm-min)+{
++++//+Inline-block+all+the+things+for+"inline"
++++.form-group+{
++++++display:+inline-block;
++++++margin-bottom:+0;
++++++vertical-align:+middle;
++++}

++++//+In+navbar-form,+allow+folks+to+*not*+use+`.form-group`
++++.form-control+{
++++++display:+inline-block;
++++++width:+auto;+//+Prevent+labels+from+stacking+above+inputs+in+`.form-group`
++++++vertical-align:+middle;
++++}
++++//+Input+groups+need+that+100%25+width+though
++++.input-group+>+.form-control+{
++++++width:+100%25;
++++}

++++[...]
++}
}|code-block|syntax|javascript|2748433|也许你应该看看input-groups，因为我猜他们正好有你想要使用的标记(working+fiddle+here)：|2748434|<div+class="row">
+++<div+class="col-lg-12">
++++<div+class="input-group+input-group-lg">
++++++<input+type="text"+class="form-control+input-lg"+id="search-church"+placeholder="Your+location+(City,+State,+ZIP)">
++++++<span+class="input-group-btn">
++++++++<button+class="btn+btn-default+btn-lg"+type="submit">Search</button>
++++++</span>
++++</div>
++</div>
</div>|2748435|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/css/#forms-inline|1|http://getbootstrap.com/components/#input-groups|2|http://jsfiddle.net/x8eqn/633^0|6|F|0|0|0|0|0|0|9|B|X|C|0|0|0|7|C|1|1H|4|2|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|1F|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1I|8|@$A|1J|B|1K|L|M]|$A|1L|B|1M|L|M]]|9|@]|C|$]]|$1|N|3|O|5|6|7|1N|8|@]|9|@]|C|$]]|$1|P|3|Q|5|R|7|1O|8|@]|9|@]|C|$S|T]]|$1|U|3|V|5|6|7|1P|8|@]|9|@$A|1Q|B|1R|1|1S]|$A|1T|B|1U|1|1V]]|C|$]]|$1|W|3|X|5|R|7|1W|8|@]|9|@]|C|$S|T]]|$1|Y|3|-4|5|6|7|1X|8|@]|9|@]|C|$]]]|Z|$10|$5|11|12|13|C|$14|15]]|16|$5|11|12|13|C|$14|17]]|18|$5|11|12|13|C|$14|19]]]]

<p>The bootstrap docs <a href="http://getbootstrap.com/css/#forms-inline" rel="noreferrer">says about this</a>:</p>

<blockquote>
  <p>Requires custom widths Inputs, selects, and textareas are 100% wide by
  default in Bootstrap. To use the inline form, you'll have to set a
  width on the form controls used within.</p>
</blockquote>

<p>The default width of 100% as all form elements gets when they got the class <code>form-control</code> didn't apply if you use the <code>form-inline</code> class on your form.</p>

<p>You could take a look at the bootstrap.css (or .less, whatever you prefer) where you will find this part:</p>

<pre><code>.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }
    // Input groups need that 100% width though
    .input-group &gt; .form-control {
      width: 100%;
    }

    [...]
  }
}
</code></pre>

<p>Maybe you should take a look at <a href="http://getbootstrap.com/components/#input-groups" rel="noreferrer">input-groups</a>, since I guess they have exactly the markup you want to use (working fiddle <a href="http://jsfiddle.net/x8eqn/633" rel="noreferrer">here</a>):</p>

<pre><code>&lt;div class="row"&gt;
   &lt;div class="col-lg-12"&gt;
    &lt;div class="input-group input-group-lg"&gt;
      &lt;input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)"&gt;
      &lt;span class="input-group-btn"&gt;
        &lt;button class="btn btn-default btn-lg" type="submit"&gt;Search&lt;/button&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|160779|text|看看下面这样的东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|160780|<form+role="form">++
++++<div+class="row">
++++++<div+class="col-xs-12">
++++++++<div+class="input-group+input-group-lg">
++++++++++++<input+type="text"+class="form-control"+/>
++++++++++<div+class="input-group-btn">
++++++++++++<button+type="submit"+class="btn">Search</button>
++++++++++</div>
++++++++</div>
++++++</div>
++++</div>
</form>|code-block|syntax|javascript|160781|http://jsfiddle.net/n6c7v/1/|offset|length|160782|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>have a look at something like this: </p>

<pre><code>&lt;form role="form"&gt;  
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;div class="input-group input-group-lg"&gt;
            &lt;input type="text" class="form-control" /&gt;
          &lt;div class="input-group-btn"&gt;
            &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
          &lt;/div&gt;&lt;!-- /btn-group --&gt;
        &lt;/div&gt;&lt;!-- /input-group --&gt;
      &lt;/div&gt;&lt;!-- /.col-xs-12 --&gt;
    &lt;/div&gt;&lt;!-- /.row --&gt;
&lt;/form&gt;
</code></pre>

<p><a href="http://jsfiddle.net/n6c7v/1/" rel="noreferrer">http://jsfiddle.net/n6c7v/1/</a></p>


blocks|key|160791|text|正如a+similar+question中所述，尝试删除input-group类的实例，看看这是否有帮助。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|160792|参考bootstrap：|160793|160794|各个表单控件会自动接收一些全局样式。默认情况下，所有带有.form-control的文本、和元素都设置为width:+100%25；。在.form-group中对标签和控件进行换行以获得最佳间距。|blockquote|160795|160796|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/11232627/perfect-100-width-of-parent-container-for-a-bootstrap-input/33142412#33142412^0|S|B|2|I|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|11|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|12|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>As stated in <a href="https://stackoverflow.com/questions/11232627/perfect-100-width-of-parent-container-for-a-bootstrap-input/33142412#33142412">a similar question</a>, try removing instances of the <code>input-group</code> class and see if that helps.</p>

<p>refering to bootstrap:</p>

<blockquote>
  <p>Individual form controls automatically receive some global styling.
  All textual , , and  elements with
  .form-control are set to width: 100%; by default. Wrap labels and
  controls in .form-group for optimum spacing.</p>
</blockquote>


blocks|key|2748487|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2748488|尝试如下所示以获得您想要的结果|blockquote|2748489|2748490|2748491|input+{
++++max-width:+100%25;
}|code-block|syntax|javascript|2748492|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|M|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|N|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|O|7|@]|8|@]|9|$]]|$1|E|3|-4|4|5|6|P|7|@]|8|@]|9|$]]|$1|F|3|G|4|H|6|Q|7|@]|8|@]|9|$I|J]]|$1|K|3|-4|4|5|6|R|7|@]|8|@]|9|$]]]|L|$]]

<blockquote>
  <p>Try something like below to achieve your desired result</p>
</blockquote>

<pre><code>input {
    max-width: 100%;
}
</code></pre>


blocks|key|2748503|text|对于Bootstrap+>4.1，这只是一个使用flexbox实用程序类的例子。只要在你的列中有一个flexbox容器，然后给它里面的所有元素"flex-fill“类。与内联表单一样，您需要自己设置元素的边距/填充。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2748504|​|2748505|.prop-label+{
++++margin:+.25rem+0+!important;
}

.prop-field+{
++++margin-left:+1rem;
}|code-block|syntax|javascript|2748506|<link+href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"+rel="stylesheet"/>
<div+class="row">
	<div+class="col-12">
		<div+class="d-flex">
			<label+class="flex-fill+prop-label">Label:</label>
			<input+type="text"+class="flex-fill+form-control+prop-field">
		</div>
	</div>
</div>|2748507|2748508|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>With Bootstrap >4.1 it's just a case of using the flexbox utility classes. Just have a flexbox container inside your column, and then give all the elements within it the "flex-fill" class. As with inline forms you'll need to set the margins/padding on the elements yourself.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.prop-label {
    margin: .25rem 0 !important;
}

.prop-field {
    margin-left: 1rem;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;div class="row"&gt;
	&lt;div class="col-12"&gt;
		&lt;div class="d-flex"&gt;
			&lt;label class="flex-fill prop-label"&gt;Label:&lt;/label&gt;
			&lt;input type="text" class="flex-fill form-control prop-field"&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|159510|text|我知道这个问题很老了，但我最近偶然发现了这个问题，找到了一个我更喜欢的解决方案，并认为我应该分享它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|159511|现在Bootstrap+5已经可用，有了一种新的方法，它的工作方式类似于使用input-groups，但看起来更像一个普通的表单，没有任何CSS调整：|offset|length|style|CODE|159512|<div+class="row+g-3+align-items-center">
++++<div+class="col-auto">
++++++++<label>Label:</label>
++++</div>
++++<div+class="col">
++++++++<input+class="form-control">
++++</div>
++++<div+class="col-auto">
++++++++<button+type="button"+class="btn+btn-primary">Button</button>
++++</div>
</div>|code-block|syntax|javascript|159513|col-auto类使这些列适合它们的内容(本例中是标签和按钮)，任何带有col类的列都应该均匀分布，以占据剩余空间。|159514|entityMap^0|0|12|B|0|0|0|8|10|3|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|P|$]]

<p>I know that this question is pretty old, but I stumbled upon it recently, found a solution that I liked better, and figured I'd share it.</p>
<p>Now that Bootstrap 5 is available, there's a new approach that works similarly to using <code>input-group</code>s, but looks more like an ordinary form, without any CSS tweaks:</p>
<pre><code>&lt;div class=&quot;row g-3 align-items-center&quot;&gt;
    &lt;div class=&quot;col-auto&quot;&gt;
        &lt;label&gt;Label:&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col&quot;&gt;
        &lt;input class=&quot;form-control&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-auto&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Button&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>The <code>col-auto</code> class makes those columns fit themselves to their contents (the label and the button in this case), and anything with a <code>col</code> class should be evenly distributed to take up the remaining space.</p>


blocks|key|158365|text|您可以为input使用flex-fill类|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|158366|<div+class="row">
<div+class="col-md-12">
++++<form+class="form-inline"+role="form">+++++++++++
++++++++++++<input+type="text"+class="form-control+input-lg+flex-fill"+id="search-church"+placeholder="Your+location+(City,+State,+ZIP)">
++++++++++++<button+type="submit"+class="btn+btn-lg">Search</button>++++++++++++
++++</form>
</div>|code-block|syntax|javascript|158367|entityMap^0|4|5|B|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>You can use <code>flex-fill</code> class for <code>input</code></p>
<pre><code>&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-12&quot;&gt;
    &lt;form class=&quot;form-inline&quot; role=&quot;form&quot;&gt;           
            &lt;input type=&quot;text&quot; class=&quot;form-control input-lg flex-fill&quot; id=&quot;search-church&quot; placeholder=&quot;Your location (City, State, ZIP)&quot;&gt;
            &lt;button type=&quot;submit&quot; class=&quot;btn btn-lg&quot;&gt;Search&lt;/button&gt;            
    &lt;/form&gt;
&lt;/div&gt;
</code></pre>



<p>I am struggling to create a textbox that fits the entire width of my <em>container</em> area.</p>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-12"&gt;
        &lt;form class="form-inline" role="form"&gt;           
                &lt;input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)"&gt;
                &lt;button type="submit" class="btn btn-lg"&gt;Search&lt;/button&gt;            
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>When I do the above, the two form elements are in-line, as I expect, but don't take up more than a few columns, at best. Hovering over the <code>col-md-12</code> div in firebug shows it taking up the expected full width. It's just the text input that doesn't seem to fill. I even tried adding an in-line width value but it didn't change anything. I know this should be simple, just feeling really dumb now.</p>

<p>Here is a fiddle: <a href="http://jsfiddle.net/52VtD/4119/embedded/result/" rel="noreferrer">http://jsfiddle.net/52VtD/4119/embedded/result/</a></p>

<p><strong>EDIT:</strong> </p>

<p>The selected answer is thorough in every way and a wonderful help. It's what I ended up using. <em>However</em> I think my initial issue was actually a problem with the default MVC5 template within Visual Studio 2013. It contained this in Site.css:</p>

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

<p>Obviously that was blocking the text-input from expanding appropriately... Fair warning to future ASP.NET template users...</p>


Bootstrap full-width text-input within inline-form

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在努力创建一个适合整个容器区域宽度的文本框。<div class="row">    <div class="col-md-12">        <form class="form-inline" role="form">                           <input type="text" ...

问Bootstrap全宽文本- inline-form中的输入
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap全宽文本- inline-form中的输入EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap全宽文本- inline-form中的输入
EN