[英]Move two input boxes side by side
I'm trying to re-arrange my input boxes to look something like this: 我正在尝试重新排列输入框,使其看起来像这样:
currently, they just go down one under each other 目前,他们只是互相摔倒
I tried using this code but all it did was make the boxes shorter http://jsfiddle.net/aY9HC/ 我尝试使用此代码,但所做的只是使盒子变短了http://jsfiddle.net/aY9HC/
Here is my code 这是我的代码
<style>
.fieldBlock
{
display: block;
width: 200px;
float: left;
}
</style>
here is the text box code 这是文本框代码
<div id="main-wrapper">
<div class="unix-login">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-4">
<div class="login-content card">
<center><h3>Register Account</h3>
<p><strong>Create Account</strong> » Purchase » Begin</p></center>
<div class="login-form">
<form data-toggle="validator" method="post" id="register_form">
<div class="form-group">
<div class="fieldBlock">
<label>Name</label>
<input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required>
</div>
</div>
<div class="form-group">
<div class="fieldBlock">
<label>Age</label>
<input type="dob" id="age" name="age"class="form-control" placeholder="03/26/2001" required></div>
</div>
<div class="form-group">
<label>Email address</label>
<input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label>Password</label>
<input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required>
<div class="help-block"></div>
</div>
<div class="form-group">
<label>Choose Your Course</label>
<select name="course" class="form-control">
<option value="0" selected>Texas Parent Taught Drivers Ed</option>
<option value="1">Texas Instructor Taught Drivers Ed</option>
<option value="2">Texas Adult Drivers Ed</option>
</select>
</div>
<div class="form-group">
<label>Referral</label>
<input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>">
</div>
<div class="form-group checkbox">
<label>
<input id="policy" type="checkbox" data-error="Don't you agree?" required> Agree the terms and Privacy Policy
</label>
<div class="help-block with-errors"></div>
</div>
<button name="register" type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30" >Register</button>
<div class="register-link m-t-15 text-center">
<p>Already have account? <a href="page-login.php"> Sign in</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
All it did was keep the boxes under each other and make them a bit smaller. 它所做的就是将盒子彼此放在一起并使它们变小一些。 I'm a bit stuck right now.
我现在有点卡住了。 Help would be appericated.
帮助将不胜枚举。 Thanks!
谢谢!
try adding 尝试添加
display:inline-block
on both text boxes. 在两个文本框中。
Alternatively you can also try 另外,您也可以尝试
display: flex;
Try to use bootstrap grid (rows and cols) to organize input fields. 尝试使用引导网格(行和列)来组织输入字段。 Example pattern:
模式示例:
<form data-toggle="validator" method="post" id="register_form">
<div class="row mx-0">
<div class="form-group col-6">
<div class="fieldBlock">
<label>Name</label>
<input id="username" type="name" name="name"
class="form-control"
placeholder="First & Last Name" required>
</div>
</div>
<div class="form-group col-6">
<div class="fieldBlock6">
<label>Age</label>
<input type="dob" id="age"
name="age"class="form-control"
placeholder="03/26/2001" required>
</div>
</div>
</div>
<div class="row mx-0">
<div class="form-group col-12">
<label>Email address</label>
<input id="email" type="email" name="email"
class="form-control" placeholder="Email"
data-error="This email is invalid" required>
<div class="help-block with-errors"></div>
</div>
</div>
</form
You were on the right track with using float to move the elements next to each other. 使用float使元素彼此相邻,您走在正确的轨道上。 However, when elements are floating next to each other in a cramped space they will stack up by default.
但是,当元素在狭窄的空间中彼此相邻漂浮时,它们将默认堆叠。 By making the parent container larger or smaller you can see how this works.
通过放大或缩小父容器,您可以了解其工作原理。
Also, there were a couple of missing fieldBlocks so the styles stop being applied. 另外,还有几个缺少的fieldBlocks,因此样式不再被应用。
I didn't want to take too much time on it but thought it would be fun to throw together a working sample from the code you provided. 我不想花太多时间,但是我认为将您提供的代码中的一个工作示例放在一起很有趣。 There's probably much more that could be cleaned up but hopefully it provides some insight.
可能还有更多可以清除的东西,但希望它能提供一些见识。
http://jsfiddle.net/aY9HC/1373/ http://jsfiddle.net/aY9HC/1373/
CSS 的CSS
/* make a nice form wrapper */
#main-wrapper{
width:100%;
padding:1em;
}
#main-wrapper h3,
#main-wrapper p,
#main-wrapper button{
text-align:center;
margin-bottom:10px;
clear:left;
}
#main-wrapper button{
display:block;
position:relative;
left:45%;
}
/* Define our basic fieldBlock style / stagger rows */
.fieldBlock
{
width: 50%;
float: left;
margin-bottom:15px;
}
.fieldBlock input,
.fieldBlock select{
height:30px;
}
.fieldBlock input[type='checkbox']{
height:10px;
}
.fieldBlock:nth-of-type(3n){
width:100%;
}
.fieldBlock:nth-of-type(3n) input{
width:40%;
}
/* Define look for our labels */
.fieldBlock label{
font-weight:bold;
display:block;
margin-bottom:5px;
}
.fieldBlock .nonblock{
display:inline-block;
}
HTML 的HTML
<div id="main-wrapper">
<h3>Register Account</h3>
<p><strong>Create Account</strong> » Purchase » Begin</p>
<form data-toggle="validator" method="post" id="register_form">
<div class="fieldBlock">
<label>Name</label>
<input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required>
</div>
<div class="fieldBlock">
<label>Age</label>
<input type="dob" id="age" name="age"class="form-control" placeholder="03/26/2001" required>
</div>
<div class="fieldBlock">
<label>Email address</label>
<input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="fieldBlock">
<label>Password</label>
<input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required>
<div class="help-block"></div>
</div>
<div class="fieldBlock">
<label>Choose Your Course</label>
<select name="course" class="form-control">
<option value="0" selected>Texas Parent Taught Drivers Ed</option>
<option value="1">Texas Instructor Taught Drivers Ed</option>
<option value="2">Texas Adult Drivers Ed</option>
</select>
</div>
<div class="fieldBlock">
<label>Referral</label>
<input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>">
</div>
<div class="fieldBlock checkbox">
<input id="policy" type="checkbox" data-error="Don't you agree?" required />
<label for="policy" class="nonblock">Agree the terms and Privacy Policy</label>
<div class="help-block with-errors"></div>
</div>
<button name="register" type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30" >Register</button>
<p>Already have account? <a href="page-login.php"> Sign in</a></p>
</form>
</div>
You can just use col
classes 您可以只使用
col
类
<div class='row'>
<div class='col'>Your first text box</div>
<div class='col'>Your second text box</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.