Html 引导程序 3 在内联选择框中显示标签

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26144660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:49:09  来源:igfitidea点击:

bootstrap 3 show label in inline selectbox

htmlcsstwitter-bootstraptwitter-bootstrap-3

提问by Eric Favoni

I set label for select box menu in bootstrap 3 like this :

我在引导程序 3 中为选择框菜单设置标签,如下所示:

<div class="col-lg-2">
    <label>Filter</label>
        <select class="form-control" name="sort">
            <option value="1">1</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
        </select>
</div>

in output in see label in top of select box menu: enter image description here

在输出中查看选择框菜单顶部的标签: 在此处输入图片说明

I need to show label inline of select box menu like this :

我需要像这样显示选择框菜单的内嵌标签:

enter image description here

在此处输入图片说明

how do show label in inline ?!

如何在内联显示标签?!

DEMO JSFIDDLE

演示JSFIDDLE

回答by Zanoldor

You need put your label and your select inside of a "group", so we have this:

你需要把你的标签和你的选择放在一个“组”中,所以我们有这个:

<div class="form-group">
    <label for="sort" class="col-sm-2 control-label"> Filter </label>
    <div class="col-sm-10">
        <select class="form-control" name="sort" id="sort">
            <option value="1">1</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
        </select>
     </div>
</div>

回答by danday74

You want 'form-inline'

你想要“表格内联”

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <div class="form-group">
    <label for="dashboard-filter">Filter By</label>
    <select id="dashboard-filter" class="form-control">
      <option>1</option>
      <option>2</option>
    </select>
  </div>
</form>

回答by danday74

You want form-inline- This example works in full screen mode (not sure why this code snippet wraps when not in full screen mode) but give it a whirl it should work for you.

你想要form-inline- 这个例子在全屏模式下工作(不知道为什么这个代码片段在非全屏模式下会换行)但是试一试它应该适合你。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
  <div class="form-group">
    <label for="dashboard-filter">Filter By</label>
    <select id="dashboard-filter" class="form-control">
      <option>1</option>
      <option>2</option>
    </select>
  </div>
</form>

Docs are here: https://getbootstrap.com/docs/3.4/css/#forms-inline

文档在这里:https: //getbootstrap.com/docs/3.4/css/#forms-inline