Question

我尝试设置标签并选择一行，但它不起作用，我也添加＆＃34; col＆＃34;上课，但它使它不平衡。

<div class="row">
    <h3>Language </h3>
    <select class="form-control">
        <option value="CSharp">C#</option>
        <option value="CPP">C++</option>
        <option value="XML">XML</option>
        <option value="JavaScript">JavaScript</option>
        <option value="SQL">SQL</option>
        <option value="HTML">HTML</option>
    </select>
</div>

Answer 1

您需要使用具有内联属性的表单来处理表单组。此外，h3基本上在内容之后休息，您需要将其设置为显示：内联或在我看来更好的解决方案是使用标签。

<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>Language </label>
    <select class="form-control">
      <option value="CSharp">C#</option>
      <option value="CPP">C++</option>
      <option value="XML">XML</option>
      <option value="JavaScript">JavaScript</option>
      <option value="SQL">SQL</option>
      <option value="HTML">HTML</option>
    </select>
  </div>
</form>

Answer 2

问题的快速解决方法是将标签周围的选择包裹起来

HTML

  <div class="form-group">
    <label>Language 
        <select class="form-control">
            <option value="CSharp">C#</option>
            <option value="CPP">C++</option>
            <option value="XML">XML</option>
            <option value="JavaScript">JavaScript</option>
            <option value="SQL">SQL</option>
            <option value="HTML">HTML</option>
        </select>
    </label>
</div>

CSS

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

.form-group select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

示例CODEPEN

享受.. :)

Answer 3

检查

.col-md-6 > h3 {
    display: inline-block;
    float: left;
  margin: 0 20px 0
}
select.form-control {
    display: inline-block;
    float: left;
    width: 50%;
}

 <div class="row">
        <div class="col-md-6">
        <h3>Language </h3>
        <select class="form-control">
            <option value="CSharp">C#</option>
            <option value="CPP">C++</option>
            <option value="XML">XML</option>
            <option value="JavaScript">JavaScript</option>
            <option value="SQL">SQL</option>
            <option value="HTML">HTML</option>
        </select>
        </div> 
	</div>

Answer 4

ID

使用网格可以完成codepen

在一行引导程序上选择并标记

4 个答案: