Question

我在我的网站上使用bootstrap 3 我创建了一行看起来像下面的图像，在这一行中，我创建了4列：
左：图片
L-R：文字
L-L：输入右：按钮

enter image description here

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

如下图所示：

enter image description here

我是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个类，它们只是用作行的容器。

请注意，由于填充等原因，两个容器都不可嵌套。

Bootstrap Containers

2。）你的'.LoginRow'中不需要4列，一个用于图像，一个用于表单元素就足够了，为你提供更多的灵活性。

3.使用引导程序的horizontal forms标记来创建表单布局。

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默认labes与右边对齐，我另外创建了这个CSS：

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

这是一个有效的bootply

Answer 2

如果我理解正确，并使用您提供的代码。我认为你不必添加具有相同div和输入框的两个标签。请检查小提琴，看看那是不是你想要的。

我还删除了<p> tag from "Forgot your password".

我改变了

<div class="col-md-2">
      User:
      Password:
    </div>

要

<div class="col-md-2"> User: <input type="text" class="form-control"> </div>

Fiddle

将我的对象设置为bootstrap 3中列的左侧

2 个答案: