Html 使用引导程序如何并排排列两个文本框
这里我是新手,请指导我如何在文本区旁边安排两个文本框Html 使用引导程序如何并排排列两个文本框,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,这里我是新手,请指导我如何在文本区旁边安排两个文本框 <form class="form-horizontal"> <div class="row"> <div class="form-group"> <div class="col-sm-2 col-md-2"> <label>Fname</label>
<form class="form-horizontal">
<div class="row">
<div class="form-group">
<div class="col-sm-2 col-md-2">
<label>Fname</label>
</div>
<div class="col-sm-4 col-md-4">
<input type="text" class="form-control" placeholder="fname" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 col-md-2">
<label class="control-label">comment</label>
</div>
<div class="col-sm-4 col-md-4">
<textarea class="form-control" rows="5"></textarea>
</div>
<div class="col-sm-4 col-md-4">
<label>Lastname</label> <input type="text" class="form-control" placeholder="lname" /><br />
<div class="col-sm-4 col-md-4">
<label>middlename</label> <input type="text" class="form-control" placeholder="moddlename" />
</div>
</div>
</div>
</form>
Fname
评论
姓氏
中间名
这里我想把LastName:TextBOx放在这个中间名下面:TextBOx这两个应该放在textArea旁边你基本上可以通过嵌套网格来获得更复杂的结构<代码>https://getbootstrap.com/docs/3.3/css/#grid-嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal">
<div class="row">
<div class="form-group">
<div class="col-sm-2 col-md-2">
<label>Fname</label>
</div>
<div class="col-sm-4 col-md-4">
<input type="text" class="form-control" placeholder="fname" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 col-md-2">
<label class="control-label">comment</label>
</div>
<div class="col-sm-4 col-md-4">
<textarea class="form-control" rows="7" ></textarea>
</div>
<div class="col-sm-4 col-md-4">
<label>Lastname</label> <input type="text" class="form-control" placeholder="lname" /><br/>
<label>middlename</label> <input type="text" class="form-control" placeholder="moddlename" />
</div>
</div>
</form>
</div>
</body>
</html>
引导示例
Fname
评论
姓氏
中间名
这通过将列的数量减少到两个,并在姓氏标签上添加上边距来实现。我内联添加它是为了能够交付一段代码,但它可以添加到CSS中
<form>
<div class="row">
<div class="col-md-6">
<label>First Name</label>
<input type="text" class="form-control" placeholder="fname" />
<label class="control-label">Comment</label>
<textarea class="form-control" rows="6"></textarea>
</div>
<div class="col-md-6">
<label style="margin-top: 100px">Last Name</label>
<input type="text" class="form-control" placeholder="lname" /><br />
<label>Middle Name</label>
<input type="text" class="form-control" placeholder="moddlename" />
</div>
</div>
</form>
名字
评论
姓
中名
LstName:textboxmiddlename:textbox应该是这样的,请帮助me@JpDuminy对不起,不清楚。你能添加一张新图片来解释你想要的确切输出吗?