blocks|key|202906|text|你必须把你的label包在select上。如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|202907|<div+class="form-group">
++<label>C-Band
++++++<select+id="cband"+class="form-control">
+++++++++<option+value="C15%2B">C15%2B</option>
+++++++++<option+value="C12-14">C12-14</option>
+++++++++<option+value="Other">Other</option>
++++++</select>
++</label>+
</div>|code-block|syntax|javascript|202908|然后添加以下CSS：|202909|.form-group+label+{
++++float:+left;
++++text-align:+left;
++++font-weight:+normal;
}

.form-group+select+{
++++display:+inline-block;
++++width:+auto;
++++vertical-align:+middle;
}|202910|这是你最新的提琴：Updated+Fiddle|202911|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/9nL9x/30/^0|6|5|D|6|0|0|0|0|9|E|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>You have to wrap your <code>label</code> around the <code>select</code>. Like this:</p>

<pre><code>&lt;div class="form-group"&gt;
  &lt;label&gt;C-Band
      &lt;select id="cband" class="form-control"&gt;
         &lt;option value="C15+"&gt;C15+&lt;/option&gt;
         &lt;option value="C12-14"&gt;C12-14&lt;/option&gt;
         &lt;option value="Other"&gt;Other&lt;/option&gt;
      &lt;/select&gt;
  &lt;/label&gt; 
&lt;/div&gt;
</code></pre>

<p>And then add the following CSS:</p>

<pre><code>.form-group label {
    float: left;
    text-align: left;
    font-weight: normal;
}

.form-group select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
</code></pre>

<p>Here is your updated fiddle: <a href="http://jsfiddle.net/9nL9x/30/" rel="noreferrer">Updated Fiddle</a></p>


blocks|key|202949|text|如果你使用最新的引导：@import+url('http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css')；|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|202950|请不要忘记制作结果大于768px的列。只有当屏幕的像素大于768px时，表格内联才有效。(只需用鼠标拖动该列即可)|202951|问题出在css+for|202952|@media+(min-width:+768px)
.form-inline+.form-control+{
++++//old+bootstrap++++
++++display:+inline-block;

++++//+new+bootstrap
++++display:+inline-block;
++++width:+auto;
++++vertical-align:+middle;
}|code-block|syntax|javascript|202953|entityMap|0|LINK|mutability|MUTABLE|url|http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css^0|O|1W|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>It does work if you use the latest bootstrap:
@import url('<a href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="nofollow">http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css</a>');</p>

<p>And please DON'T FORGET to make the column with result more than 768px. Form-inline works only if screen with more than 768px. (Just drag the column with a mouse a bit)</p>

<p>The issue was with css for </p>

<pre><code>@media (min-width: 768px)
.form-inline .form-control {
    //old bootstrap    
    display: inline-block;

    // new bootstrap
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
</code></pre>


blocks|key|202975|text|这个问题是如此严重，以至于有一个Github项目来解决它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|202976|https://fk.github.io/select2-bootstrap-css/|offset|length|202977|将他们的CSS文件放在来自Select2的CSS之后。|202978|<link+rel="stylesheet"+href="css/select2.min.css">
<link+rel="stylesheet"+href="css/select2-bootstrap.css">|code-block|syntax|javascript|202979|然后您可以将标签与select一起使用|202980|<div+class="form-group">
++++<label+for="sName">Select+Title</label>
++++<select+class="js-example-basic-single+form-control"+id="sName">
++++</select>
</div>|202981|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|17|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

<p>This problem is so recorrent that there is a Github project solving it</p>

<p><a href="https://fk.github.io/select2-bootstrap-css/" rel="nofollow">https://fk.github.io/select2-bootstrap-css/</a></p>

<p>Place their CSS file right after the CSS from Select2</p>

<pre><code>&lt;link rel="stylesheet" href="css/select2.min.css"&gt;
&lt;link rel="stylesheet" href="css/select2-bootstrap.css"&gt;
</code></pre>

<p>Then you can use the label along with the select </p>

<pre><code>&lt;div class="form-group"&gt;
    &lt;label for="sName"&gt;Select Title&lt;/label&gt;
    &lt;select class="js-example-basic-single form-control" id="sName"&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>


blocks|key|203047|text|bootstrap中有一条CSS规则，在小屏幕上将.form-control的宽度设置为100%25。因此，即使它是浮动的，它也将占据整个宽度，因此从新行开始。好消息是你只需要几行CSS就可以覆盖它：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|203048|.form-control+{
width:auto;
display:inline-block;
}|code-block|syntax|javascript|203049|希望这能简化任何仍然面临这个问题的人的问题！http://jsfiddle.net/c3m77ah6/2/|203050|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/c3m77ah6/2/^0|P|D|0|0|M|V|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>There's a CSS rule in bootstrap that sets the width of <code>.form-control</code> to 100% on small screen sizes.  So even when it's floated, it will take the whole width and therefore start on a new line.  Good news is you only need a couple lines of CSS to override it:</p>

<pre><code>.form-control {
width:auto;
display:inline-block;
}
</code></pre>

<p>Hope this simplifies the problem for anyone still facing the issue!  <a href="http://jsfiddle.net/c3m77ah6/2/">http://jsfiddle.net/c3m77ah6/2/</a></p>


blocks|key|203087|text|带有form-group的表单内联类将完成如下工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|203088|<div+class="form-group+form-inline">
<label+for="sel1">My+InlineSelect:+</label>+++++++++++++
++++<select+class="form-control"+id="rotit">
++++<option+value="1">Value+1</option>
++++<option+value="2">Value+2</option>
++++<option+value="3">Value+3</option>
</select>
</div>++|code-block|syntax|javascript|203089|演示：http://jsfiddle.net/9arahevn/2/|offset|length|203090|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/9arahevn/2/^0|0|0|3|V|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>form-inline class with form-group will do the job like </p>

<pre><code>&lt;div class="form-group form-inline"&gt;
&lt;label for="sel1"&gt;My InlineSelect: &lt;/label&gt;             
    &lt;select class="form-control" id="rotit"&gt;
    &lt;option value="1"&gt;Value 1&lt;/option&gt;
    &lt;option value="2"&gt;Value 2&lt;/option&gt;
    &lt;option value="3"&gt;Value 3&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;  
</code></pre>

<p>demo : <a href="http://jsfiddle.net/9arahevn/2/" rel="nofollow noreferrer">http://jsfiddle.net/9arahevn/2/</a></p>


<p>My labels keep appearing above the selects.  I want them all on the same line.  Pls see the jsfiddle: <a href="http://jsfiddle.net/jjgelinas77/9nL9x/" rel="noreferrer">http://jsfiddle.net/jjgelinas77/9nL9x/</a></p>

<pre><code>&lt;div class="well well-sm"&gt;
  &lt;form name="myForm" role="form" novalidate="novalidate" class="form-inline"&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;C-Band&lt;/label&gt;
      &lt;select id="cband" class="form-control"&gt;
        &lt;option value="C15+"&gt;C15+&lt;/option&gt;
        &lt;option value="C12-14"&gt;C12-14&lt;/option&gt;
        &lt;option value="Other"&gt;Other&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;C-Band&lt;/label&gt;
      &lt;select ng-model="form.cband2" id="cband2" class="form-control"&gt;
        &lt;option value="C15+"&gt;C15+&lt;/option&gt;
        &lt;option value="C12-14"&gt;C12-14&lt;/option&gt;
        &lt;option value="Other"&gt;Other&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;button class="btn btn-primary"&gt;Filter&lt;/button&gt;
  &lt;/form&gt;
&lt;/div&gt;
</code></pre>


Bootstrap 3: how to create an inline form with selects and labels?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我的标签总是出现在选择的上方。我希望他们都在同一条线上。请参阅jsfiddle：<div class="well well-sm">  <form name="myForm" role="form" novalidate="novalidate" class="form-inline">    <div class="...

问Bootstrap 3:如何创建带有选择和标签的内联表单？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3:如何创建带有选择和标签的内联表单？EN