0

在此处输入图像描述我有以下使用引导程序的登录屏幕代码。请帮助将标签与表单输入字段对齐在同一行。 

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

4

3 回答 3

0

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

<input class="btn btn-primary" name="commit" type="submit" value="Log In" style="margin-left: 15px;"/>
于 2014-03-06T17:46:46.503 回答
0

这是使用 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/

于 2014-03-06T15:17:04.467 回答
0 
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 并在您的项目中继续前进。页面布局应设计为仅开发人员应该能够在 UI 层中使用（应用）css

于 2013-10-30T05:23:57.207 回答