Question

我正在尝试在宽度为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%">

Answer 1

此代码可以帮助您

<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>

bootstrap形式太大了

1 个答案: