我想创建一个表单，textarea字段位于许多输入行旁边：
<form class="form-inline">
<table id="table_form">
<tbody>
<tr>
<td class="td_form">
<div class="col-sm-4">
<input type="text" class="form-control" id="login" placeholder="login">
</div>
</td>
</tr>
<tr>
<td class="td_form">
<div class="col-sm-4">
<input type="email" class="form-control" id="Email" placeholder="Email">
</div>
</td>
</tr>
<tr>
<td class="td_form">
<div class="col-sm-4">
<input type="tel" class="form-control" id="Phone" placeholder="Phone">
</div>
</td>
</tr>
<tr>
<td class="td_form">
<div class="col-sm-4">
<input type="text" class="form-control" id="Address" placeholder="Address">
</div>
</td>
</tr>
</tbody>
</table>
<div class="col-sm-4">
<textarea class="form-control" id="comments" placeholder="comments" rows="3"></textarea>
</div>
</form>
但是这段代码会一个接一个地显示这些块，我想在同一列上显示login, email and address，在另一列上显示textarea。如何解决？
答案 0 :(得分：2)
试试这段代码，它将解决您的问题：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form" role="form">
<div class="col-sm-4">
<input type="text" class="form-control" id="login" placeholder="login">
<input type="email" class="form-control" id="Email" placeholder="Email">
<input type="tel" class="form-control" id="Phone" placeholder="Phone">
<input type="text" class="form-control" id="Address" placeholder="Address">
</div>
<div class="col-sm-8">
<textarea class="form-control" id="comments" placeholder="comments" rows="3"></textarea>
</div>
</form>
答案 1 :(得分：0)
不要使用表格来定位页面上的元素！这是depricated。请改用块级元素。例如：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form" role="form">
<div class="col-xs-4">
<div class="form-group">
<label for="login">Login</label>
<input type="text" class="form-control" id="login" placeholder="login">
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="email" class="form-control" id="Email" placeholder="Email">
</div>
<div class="form-group">
<label for="Phone">Phone</label>
<input type="tel" class="form-control" id="Phone" placeholder="Phone">
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="comments">Comments</label>
<textarea class="form-control" id="comments" placeholder="comments" rows="3"></textarea>
</div>
</div>
</form>
如果您不需要标签，请使用
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form" role="form">
<div class="col-xs-4">
<input type="text" class="form-control" id="login" placeholder="login">
<input type="email" class="form-control" id="Email" placeholder="Email">
<input type="tel" class="form-control" id="Phone" placeholder="Phone">
</div>
<div class="col-xs-4">
<textarea class="form-control" id="comments" placeholder="comments" rows="3"></textarea>
</div>
</form>
有关详细信息，请参阅Bootstrap documentation。
答案 2 :(得分：0)
您的textarea已位于其他输入字段的右侧。如果您希望它变得尽可能宽，请使用类col-sm-8作为其容器并将其width: 100%赋予它，就像在我的codepen中一样：
https://codepen.io/anon/pen/jmZZQY
（它在代码片段中效果不佳，因为它使用bootstrap，所以请查看代码集，其中包含bootstrap）
答案 3 :(得分：0)
我希望这对你有用
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="row">
<div class="col-sm-4 col-md-4 col-xs-4">
<div class="form-group">
<input type="text" class="form-control" id="login" placeholder="Login" name="login">
</div>
<div class="form-group">
<input type="text" class="form-control" id="email" placeholder="Email" name="email">
</div>
<div class="form-group">
<input type="text" class="form-control" id="phone" placeholder="Phone" name="phone">
</div>
<div class="form-group">
<input type="text" class="form-control" id="address" placeholder="Address" name="address">
</div>
</div>
<div class="col-sm-4 col-md-4 col-xs-4">
<textarea rows="3" class="form-control">
</textarea>
</div>
</form>
答案 4 :(得分：0)
请遵循bootstrap内联表单，这是清除此问题的好方法... http://getbootstrap.com/css/#forms-inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
请检查..