Question

enter image description here 我有使用bootstrap登录屏幕的以下代码。请帮助将标签与表单输入字段在同一行中对齐。

<div class="container">  
<div class="row">
    <div class="col-md-6">
      <div>
        <form class="form-horizontal">
        <fieldset>
        <legend>Existing Customer</legend>
        <div class="control-group">
        <label class="control-label" for="user">User Name:</label>
        <div class="control-group">
        <input type="text" class="textbox" id="user">
        </div>
        <label class="control-label" for="pwd">Password:</label>
        <div class="controls">
        <input type="text" class="textbox" id="pwd">
        </div>
        <div class="controls">
        <input class="btn btn-primary" name="commit" type="submit" value="Log In" />
        </div>
        </div>
        </fieldset>
        </form>
      </div>      
    </div>

  <div class="col-md-6">
        <legend>New Customer</legend>    
  </div>

Answer 1

Hi use table which solves your alignment issues.
-------------------------------------------------------------
 <html>
 <head>
 </head>
 <body>
 <div class="container">  
 <div class="row">
<div class="col-md-6">
  <div>
    <form class="form-horizontal">
    <fieldset>
    <legend>Existing Customer</legend>
    <table>
    <tr>
    <td>
    <div class="control-group">
    <label class="control-label" for="user">User Name:</label>
    </td>
    <td>
    <div class="control-group">
    <input type="text" class="textbox" id="user">
    </div>
    </td>
    </tr>
    <tr>
    <td>
    <label class="control-label" for="pwd">Password:</label>
    </td>
    <td>
    <div class="controls">
    <input type="text" class="textbox" id="pwd">
    </div>
    </td>
    </tr>

    <div class="controls">
    <input class="btn btn-primary" name="commit" type="submit" value="Log In" />
    </div>
    </div>
    </table>
    </fieldset>
    </form>
  </div>      
</div>

  <div class="col-md-6">
    <legend>New Customer</legend>    
 </div>
 </body>

我认为你应该从ui专家那里获取css并继续推进你的项目。这页纸布局应该设计为开发人员只能使用（应用）css UI图层

Answer 2

以下是使用Bootstrap 3的代码：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <form class="form-horizontal" role="form">
                <fieldset>
                    <legend>Existing Customer</legend>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="user">User Name:</label>
                        <div class="col-sm-4">
                            <input type="text" class="textbox form-control" id="user">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="pwd">Password:</label>
                        <div class="col-sm-4">
                            <input type="text" class="textbox form-control" id="pwd">
                        </div>
                    </div>
                    <div class="form-group">
                        <input class="btn btn-primary" name="commit" type="submit" value="Log In" />
                    </div>
                </fieldset>
            </form>
        </div>
        <div class="col-md-6">
            <legend>New Customer</legend>
        </div>
    </div>

和相应的小提琴：http://jsfiddle.net/G2cgf/

Answer 3

向按钮提交一个margin-left，如下所示：

<input class="btn btn-primary" name="commit" type="submit" value="Log In" style="margin-left: 15px;"/>

如何在与表单相同的行上对齐标签？

3 个答案: