css - 将我的对象设置在 bootstrap 3 中列的左侧

Question

我在我的网站上使用 bootstrap 3。
我创建了一行，如下图所示，在这一行中，我创建了 4 列:
左:图片
L-R:文字
L-L:输入 右:按钮

我的问题在哪里 ?
1.将用户/密码/输入/登录按钮设置在列的左侧
2.设置按钮高度小
3.“忘记密码”为 1 行而不是 2 行。

像下图:

我是 HTML/CSS 的新手。我怎样才能实现它？

这是我的代码:

<div class="row loginBody">
  <div class="col-md-4 "></div>
  <div class="col-md-4 ">
  <div class="container-fluid InputLoginDetails LoginFont">
    <div class="row LoginRow">
    <div class="col-md-4"><img src="img/Hello.png" class="img-responsive" /></div>
    <div class="col-md-2">
      User:
      Password:
    </div>
    <div class="col-md-3 ">
      <input type="text" class="form-control">
      <input type="text" class="form-control">

     <p>Forgot your password?</p>

     </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-primary ">Login</button>
    </div>
    </div>
  </div>
</div>

.loginBody{
background-color: #808689;
margin: auto;
margin-top: 5%;
border-radius: 5px;
}
.LoginRow{
padding-top: 3%;
padding-bottom: 3%;
background-color: white;
}
.LoginFont{
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
color: #7296cd;
font-size: 1em;
font-weight: bold;
padding-top: 5%;
}
.InputLoginDetails input[type="text"] {
 height: 1.1em;
 font-size: 0.9em;
}

Answer 1

我在您的 HTML 标记中更改了几处内容。

1.) 您不在行内使用.container 类，它们只是用作行外部 的容器。

Note that, due to padding and more, neither container is nestable.

Bootstrap Containers

2.) 您不需要在“.LoginRow”中使用 4 列，一列用于图像，一列用于表单元素就足够了，并为您提供了更大的灵 active 。

3.) 使用 horizontal forms用于创建表单布局的 Bootstrap 标记。

4.) 总而言之，您需要仔细查看 Bootstrap 文档及其示例，尤其是网格系统。那么做很多事情真的很容易。

这是您更改后的 HTML 标记:

<div class="row loginBody">
  <div class="col-md-4 "></div>
  <div class="col-md-4 ">
  <div class="InputLoginDetails LoginFont">

    <div class="row LoginRow">
        <div class="col-md-4"><img src="http://placehold.it/200x200" class="img-responsive"></div>
        <div class="col-md-8">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">User</label>
                    <div class="col-sm-6">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-6">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    </div>
                    <div class="col-sm-4">
                        <button type="button" class="btn btn-primary">Login</button>
                    </div>
                </div>
                <div class="form-group">
                     <div class="col-sm-8 col-sm-offset-2">
                         <p>Forgot your password?</p>
                     </div>
                </div>
           </form>
        </div>
     </div>
</div>
</div>
</div>

您说过要将用户/密码标签左对齐。由于 bootstrap 默认标签是右对齐的，我另外创建了这个 CSS:

.LoginRow .form-group label {
    text-align: left;
  }

这是一个有效的 bootply