在标签旁边放置输入答案

【问题标题】：Placing input next to label在标签旁边放置输入
【发布时间】：2019-06-14 15:45:46
【问题描述】：

我正在使用引导程序 3.0.0

如何将输入放在标签旁边？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-2">
    <div class="form-group">
      <label for="zipID">Zip Code:</label>
      <select name="zipID" id="zipID" class="form-control input-sm" required message="Please select a zip code.">
        <option value="">Please Select</option>
        <option value="34201" class="notranslate">34201</option>
        <option value="34202" class="notranslate">34202</option>
        <option value="34203" class="notranslate">34203</option>
        <option value="34204" class="notranslate">34204</option>
        <option value="34205" class="notranslate">34205</option>
        <option value="34207" class="notranslate">34207</option>
        <option value="34208" class="notranslate">34208</option>
        <option value="34209" class="notranslate">34209</option>
        <option value="34210" class="notranslate">34210</option>
        <option value="34211" class="notranslate">34211</option>
        <option value="34212" class="notranslate">34212</option>
        <option value="34281" class="notranslate">34281</option>
        <option value="34215" class="notranslate">34215</option>
        <option value="34216" class="notranslate">34216</option>
        <option value="34217" class="notranslate">34217</option>
        <option value="34219" class="notranslate">34219</option>
        <option value="34221" class="notranslate">34221</option>
        <option value="34222" class="notranslate">34222</option>
        <option value="34228" class="notranslate">34228</option>
        <option value="34243" class="notranslate">34243</option>
        <option value="34251" class="notranslate">34251</option>
      </select>
    </div>
  </div>
</div>

我正在尝试将选择下拉菜单放在标签旁边，而不是在标签下方。如何在标签旁边输入？

【问题讨论】：

“我正在使用 bootstrap 3.0.0”——这不是你的代码所说的。
jquery/2.2.4 — jQuery 2.x 不受支持并且不再接收安全更新。使用受支持的 jQuery 版本。
Bootstrap 3.x 有一些严重的错误，我强烈建议升级到当前的 bootstrap 4.x，它有许多新的可靠组件，让一切变得更容易。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

要在另一个旁边显示元素，请使用display:inline-block（或者，如果您使用的是 flex-box，则可以将 flex 与行的 flex-direction 一起使用，但那是另一天的事了）。您正在使用 Bootstrap css，但您可以添加一些自己的 css。因为 css 是在 bootstrap 中预定义的，所以我不得不在 inline-block 属性前面添加!important。

我在您的标签中添加了一个“标签控制”类。您可以添加 form-control 类并将它们的大小设置为相同，但是如果您这样做，您可能希望通过添加 label.form-control{border:none;} 来去除标签的边框。通过创建一个新类，您可以改变元素的大小。

希望对你有帮助

.label-control {
  border: none;
  padding: 10px;
  max-width: 30%;
}

.form-control {
  display: inline-block!important;
  vertical-align: middle;
  max-width: 60%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-2">
    <div class="form-group">
      <label for="zipID" class="label-control">Zip Code:</label>
      <select name="zipID" id="zipID" class="form-control input-sm" required message="Please select a zip code.">
        <option value="">Please Select</option>
        <option value="34201" class="notranslate">34201</option>
        <option value="34202" class="notranslate">34202</option>
        <option value="34203" class="notranslate">34203</option>
        <option value="34204" class="notranslate">34204</option>
        <option value="34205" class="notranslate">34205</option>
        <option value="34207" class="notranslate">34207</option>
        <option value="34208" class="notranslate">34208</option>
        <option value="34209" class="notranslate">34209</option>
        <option value="34210" class="notranslate">34210</option>
        <option value="34211" class="notranslate">34211</option>
        <option value="34212" class="notranslate">34212</option>
        <option value="34281" class="notranslate">34281</option>
        <option value="34215" class="notranslate">34215</option>
        <option value="34216" class="notranslate">34216</option>
        <option value="34217" class="notranslate">34217</option>
        <option value="34219" class="notranslate">34219</option>
        <option value="34221" class="notranslate">34221</option>
        <option value="34222" class="notranslate">34222</option>
        <option value="34228" class="notranslate">34228</option>
        <option value="34243" class="notranslate">34243</option>
        <option value="34251" class="notranslate">34251</option>
      </select>
    </div>
  </div>
</div>

【讨论】：

您可以交替拆分引导程序“网格”，以便邮政编码为一个 div，而选择在下一个 ..

【解决方案2】：

可能不是最优雅的解决方案，但您可以使用 HTML 的表格功能：https://www.w3schools.com/html/html_tables.asp

我更改了您的代码以提供我认为是所需的结果，祝您有美好的一天，并祝您表单的其余部分好运！

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<table>
  <div class="row">
  <div class="col-lg-2">
    <div class="form-group">
      <tr>
      <th><label for="zipID">Zip Code:</label></th>
      <th>
      <select name="zipID" id="zipID" class="form-control input-sm" required message="Please select a zip code.">
        <option value="">Please Select</option>
        <option value="34201" class="notranslate">34201</option>
        <option value="34202" class="notranslate">34202</option>
        <option value="34203" class="notranslate">34203</option>
        <option value="34204" class="notranslate">34204</option>
        <option value="34205" class="notranslate">34205</option>
        <option value="34207" class="notranslate">34207</option>
        <option value="34208" class="notranslate">34208</option>
        <option value="34209" class="notranslate">34209</option>
        <option value="34210" class="notranslate">34210</option>
        <option value="34211" class="notranslate">34211</option>
        <option value="34212" class="notranslate">34212</option>
        <option value="34281" class="notranslate">34281</option>
        <option value="34215" class="notranslate">34215</option>
        <option value="34216" class="notranslate">34216</option>
        <option value="34217" class="notranslate">34217</option>
        <option value="34219" class="notranslate">34219</option>
        <option value="34221" class="notranslate">34221</option>
        <option value="34222" class="notranslate">34222</option>
        <option value="34228" class="notranslate">34228</option>
        <option value="34243" class="notranslate">34243</option>
        <option value="34251" class="notranslate">34251</option>
      </select>
      </th>
    </div>
  </div>
  </div>
</table>
</tr>

【讨论】：

我在寻找引导方式

【解决方案3】：

您可以使用 CSS 完成此操作。这是您使用一些 CSS 属性和父 DIV 按需要工作的示例。这也可以使用引导程序的网格来完成。

        <div class="row">
            <div class="col-lg-2">
                <div class="form-group">
                    <div style="white-space: nowrap">
                        <label style="display: inline-block">Zip Code:</label>
                        <select name="zipID" id="zipID" style="display: inline-block" required
                            message="Please select a zip code.">
                            <option value="">Please Select</option>
                            <option value="34201" class="notranslate">34201</option>
                            <option value="34202" class="notranslate">34202</option>
                            <option value="34203" class="notranslate">34203</option>
                            <option value="34204" class="notranslate">34204</option>
                            <option value="34205" class="notranslate">34205</option>
                            <option value="34207" class="notranslate">34207</option>
                            <option value="34208" class="notranslate">34208</option>
                            <option value="34209" class="notranslate">34209</option>
                            <option value="34210" class="notranslate">34210</option>
                            <option value="34211" class="notranslate">34211</option>
                            <option value="34212" class="notranslate">34212</option>
                            <option value="34281" class="notranslate">34281</option>
                            <option value="34215" class="notranslate">34215</option>
                            <option value="34216" class="notranslate">34216</option>
                            <option value="34217" class="notranslate">34217</option>
                            <option value="34219" class="notranslate">34219</option>
                            <option value="34221" class="notranslate">34221</option>
                            <option value="34222" class="notranslate">34222</option>
                            <option value="34228" class="notranslate">34228</option>
                            <option value="34243" class="notranslate">34243</option>
                            <option value="34251" class="notranslate">34251</option>
                        </select>
                    </div>

                </div>
            </div>
        </div>`

【讨论】：

【解决方案4】：

您实际上可以使用form-inline 类来实现您的目标：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-2">
      <div class="form-group form-inline">
        <label for="zipID">Zip Code:</label>
        <select name="zipID" id="zipID" class="form-control input-sm" required message="Please select a zip code.">
                <option value="">Please Select</option>
                <option value="34201" class="notranslate">34201</option>
                <option value="34202" class="notranslate">34202</option>
                <option value="34203" class="notranslate">34203</option>
                <option value="34204" class="notranslate">34204</option>
                <option value="34205" class="notranslate">34205</option>
                <option value="34207" class="notranslate">34207</option>
                <option value="34208" class="notranslate">34208</option>
                <option value="34209" class="notranslate">34209</option>
                <option value="34210" class="notranslate">34210</option>
                <option value="34211" class="notranslate">34211</option>
                <option value="34212" class="notranslate">34212</option>
                <option value="34281" class="notranslate">34281</option>
                <option value="34215" class="notranslate">34215</option>
                <option value="34216" class="notranslate">34216</option>
                <option value="34217" class="notranslate">34217</option>
                <option value="34219" class="notranslate">34219</option>
                <option value="34221" class="notranslate">34221</option>
                <option value="34222" class="notranslate">34222</option>
                <option value="34228" class="notranslate">34228</option>
                <option value="34243" class="notranslate">34243</option>
                <option value="34251" class="notranslate">34251</option>
              </select>
      </div>
  </div>
</div>

请参阅Inline Form 以获得进一步说明。或者也许你实际上想要做的是Horizontal Form。

【讨论】：