Question

我使用Twitter Bootstrap，我想将电子邮件/密码字段移到左侧，以便与面板标题和提交按钮对齐。

我该怎么做？

{% extends "layout.html" %}
{% block body %}
{% if error %}
<p class="alert alert-error">{{ error }}{% endif %}
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Login</h2>
</div>
<div class="panel-body">
  <form class="form-horizontal" action="{{ url_for('login') }}" method="post">
     <div class="control-group">
        <label class="control-label" for="inputEmail">Email:</label>
        <div class="controls">
           <input type="text" name="inputEmail" placeholder="Email" required>
        </div>
     </div>
     <div class="control-group">
        <label class="control-label" for="inputPassword">Password:</label>
        <div class="controls">
           <input type="password" name="inputPassword" placeholder="Password" required>
        </div>
     </div>
     <button type="submit" class="btn">Submit</button>
  </form>
   Create account here
 </div>
 </div>
 {% endblock %}

Answer 1

将form元素中的“form-horizontal”类更改为“form”。听起来你只需要像Bootstrap的基本表单示例：http://getbootstrap.com/css/#forms-example

试试这个：

http://codepen.io/nrbernard/pen/rbvxE/?editors=100

<div>
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h2 class="panel-title">Login</h2>
    </div>

    <div class="panel-body">
      <form class="form" action="{{ url_for('login') }}" method="post">
        <div class="form-group">
          <label class="control-label" for="inputEmail">Email:</label>
          <input type="text" class="form-control" name="inputEmail" placeholder="Email" required>
        </div>

        <div class="form-group">
          <label class="control-label" for="inputPassword">Password:</label>
          <input type="password" class="form-control" name="inputPassword" placeholder="Password" required>
        </div>

        <div class="form-group">
          <button type="submit" class="btn">Submit</button>
        </div>

        <p>Create account here</p>
      </form>
    </div>  
  </div>
</div>

尝试将用户表单拉到左侧

1 个答案: