如何并排放置两个输入字段 [英] How to Place Two Input Fields Side-by-Side
本文介绍了如何并排放置两个输入字段的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
一段时间以来,我一直在尝试并排放置两个输入字段,但我无法让它们实际内联.这是我的HTML:
I've been trying to place two input fields side-by-side for sometime now and and I can't get them to actually get inline. Here's my HTML:
<div class="container">
<div class="form-group name1 col-md-6">
<label for="exampleInputEmail1" class="formText">FIRST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverName">
</div>
<div class="form-group name2 col-md-6">
<label for="exampleInputEmail1" class="formText">LAST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverPhone">
</div>
</div>
我也试图利用Bootstrap,但是我无法终生让它们并排对齐.这是相应的CSS:
I'm trying to utilize Bootstrap as well, but I can't for the life of me get them to align side-by-side. Here's the corresponding CSS:
.name1 {
float: left;
}
.name2 {
float: right;
}
#name {
width: 223.67px;
height: 40.25px;
}
.form-group {
margin-left: 5%;
margin-right: 5%;
}
.containerr {
display: inline-block;
}
这是我的输出:
将它们并排放置的最佳方法是什么?
Whats the best way to place them side-by-side?
推荐答案
Bootstrap应该为您做到这一点.好像您在列周围缺少<div class="row">
:
Bootstrap should do this for you. Looks like you're missing the <div class="row">
around your columns:
<div class="container">
<div class="row">
<div class="form-group name1 col-md-6">
<label for="exampleInputEmail1" class="formText">FIRST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverName">
</div>
<div class="form-group name2 col-md-6">
<label for="exampleInputEmail1## Heading ##" class="formText">LAST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverPhone">
</div>
</div>
</div>
这篇关于如何并排放置两个输入字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文