我正在尝试设计一个形式在一个面积的宽度Col-SM-8。表单中有三列:标签、文本输入和用户名检查。标签宽度为col-sm-2,用户名检查宽度为col-sm-1,其余为文本输入。我的计算是文本输入应该有5的宽度,但结果太难看了。我尝试手动将宽度设置为col-sm-7,但仍然不够长。如果我将文本输入的宽度设置为col-sm-8,那么我会在网页底部看到滚动条。我的目标是1。将标签宽度设置为左侧的col-sm-2;2.将用户名检查的宽度设置为右侧的col-sm-1;3.文本输入中间取整宽。请问如何实现这一点?下面是我的旧代码:
<div class="col-sm-8" id="content" style="border-left: #dbe0e3 1px solid;">
<form name="form_register" id="form_register" method="post" class="form-horizontal">
<fieldset>
<legend class="text-center">Enter your details below.</legend>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username *</label>
<div class="col-sm-7">
<input type="text" name="username" id="username" class="form-control" maxlength="40" required />
</div>
<div class="col-sm-1"><span id="usernameCheck"></span></div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password *</label>
<div class="col-sm-7">
<input type="password" name="password" id="password" class="form-control" maxlength="20" />
</div>
</div>
我的新代码的结果更好,但我只是想知道是否有更优雅的方法:将用户名的div从
<div class="col-sm-7">
至
<div class="col-sm-7" style="width:75%">
这段代码对您有帮助
null
<html>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="col-sm-8" id="content" style="border-left: #dbe0e3 1px solid;">
<form name="form_register" id="form_register" method="post" class="form-horizontal">
<fieldset>
<legend class="text-center">Enter your details below.</legend>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username *</label>
<div class="col-sm-7">
<input type="text" name="username" id="username" class="form-control" maxlength="40" required />
</div>
<div class="col-sm-1"><span id="usernameCheck">User Error Check</span></div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password *</label>
<div class="col-sm-7">
<input type="password" name="password" id="password" class="form-control" maxlength="20" />
</div>
</div>
</body>
</html>