提问者:小点点

引导表单太大


我正在尝试设计一个形式在一个面积的宽度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%">

共1个答案

匿名用户

这段代码对您有帮助

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>