我正在使用bootstrap 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>
我正在尝试将select下拉列表放置在标签旁边而不是标签下方。如何在标签旁边输入内容?
答案 0 :(得分:1)
要使用display:inline-block
来显示彼此相邻的元素(或者,如果您使用的是flex-box,则可以将flex与row的flex-direction一起使用,但这又是一天了)。您正在使用Bootstrap CSS,但是可以添加一些自己的CSS。这是因为css是在引导程序中预定义的,因此我必须在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>
答案 1 :(得分:0)
可能不是最优雅的解决方案,但是您可以使用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>
答案 2 :(得分:0)
您可以使用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>`
答案 3 :(得分:0)
您实际上可以使用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。