html - 水平形式+行内形式

Question

我正在尝试使用水平表单和内联表单在 Bootstrap 上制作表单用户配置文件，但它们不能一起工作。

这是我的代码:

<%= form_for @user, url: edit_project_user_path, html: { method: :put, class: "form-horizontal", role: "form" } do |user_fields| %>

          <div class="row">
            <div class="col-sm-12 margin-top-20 margin-bottom-20">
              <%= image_tag("user_no_foto.jpg", alt: "Avatar", class: "img-circle avatar-lg center-block") %>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-9 col-sm-offset-3 margin-bottom-20 text-muted">
              <h4>Аккаунт</h4>
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmail" class="col-sm-3 control-label">Эл. почта*</label>
            <div class="col-sm-7">
              <input type="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword" class="col-sm-3 control-label">Пароль*</label>
            <div class="col-sm-7">
              <input type="email" class="form-control" id="inputPassword" placeholder="Email">
            </div>
          </div>
          <div class="col-sm-12 border-row margin-bottom-40 margin-top-40"></div>
          <div class="row">
            <div class="col-sm-9 col-sm-offset-3 margin-bottom-20 text-muted">
              <h4>Информация о пользователе</h4>
            </div>
          </div>
          <div class="form-group">
            <label for="inputLastName" class="col-sm-3 control-label">Фамилия*</label>
            <div class="col-sm-7">
              <input type="email" class="form-control" id="inputLastName" placeholder="Email">
            </div>
          </div>
          <div class="form-group">
            <label for="inputFirstName" class="col-sm-3 control-label">Имя*</label>
            <div class="col-sm-7">
              <input type="email" class="form-control" id="inputFirstName" placeholder="Email">
            </div>
          </div>
          <div class="form-group">
            <label for="inputMiddleName" class="col-sm-3 control-label">Отчество</label>
            <div class="col-sm-7">
              <input type="email" class="form-control" id="inputMiddleName" placeholder="Email">
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-3 control-label">Дата рождения*</label>
            <div class="col-sm-7">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
          </div>
          <div class="col-sm-12 border-row margin-bottom-40 margin-top-40"></div>
          <div class="row">
            <div class="col-sm-9 col-sm-offset-3 margin-bottom-20 text-muted">
              <h4>Дополнительные адреса эл. почты</h4>
            </div>
          </div>
          <div class="form-group">
            <span class="col-sm-3 control-label">Доп. почта</span>
            <div class="col-sm-7">
              <div class="form-group row">
                <label for="inputKey" class="sr-only">Key</label>
                <div class="col-sm-3">
                  <input type="text" class="form-control" id="inputKey" placeholder="Key">
                </div>
                <label for="inputValue" class="sr-only">Value</label>
                <div class="col-sm-3">
                  <input type="text" class="form-control" id="inputValue" placeholder="Value">
                </div>
              </div>
            </div>
          </div>
      <% end %>

为什么它丢失了输入之间的间隔？

Answer 1

要在响应式布局中安排输入框本身，请设置底部边距。希望对您有所帮助:)