Question

我一直在尝试构建一个不成功的日期字段，这会将day month和Year并排放在一起，就好像它是一个字段一样。相反，它们堆叠在一起。如果我添加列，将存在巨大的差距，这是不可取的。我已经能够很好地使用表格来设置它，但这不是一种非常语义化的方法。

你能帮助一个优雅的解决方案吗？

<form action="/login" method="post" role="form" data-parsley-validate="">
        <div class="col-md-6">
          <div class="form-group"> 
                      <label for="i_am_a">i_am_a_lbl</label>
                      <select id="i_am_a" class="form-control">
                        <option value="man">man</option>
                        <option value="woman">woman</option>
                      </select>
                      <!-- input(id=field._id, placeholder=field._id).margin10p.form-control.input-lg-->
          </div>
        </div>
        <div class="col-md-6"> 
          <div class="form-group">
                      <label for="looking_for">looking_for_lbl</label>
                      <select id="looking_for" class="form-control">
                        <option value="women">women</option>
                        <option value="men">men</option>
                      </select>
                      <!-- input(id=field._id, placeholder=field._id).margin10p.form-control.input-lg-->
          </div>
        </div>
        <div class="col-md-12"> 
          <div class="form-group">
                      <select id="date_of_birth" width="20" class="form-control">
                        <option value="">Day</option>
                        <option value="0">1</option>
                        <option value="1">2</option>
                        <option value="2">3 ... removed the rest</option>
                      </select>
                      <select id="date_of_birth" class="form-control">
                        <option value="">Month</option>
                        <option value="january">January</option>
                        <option value="february">February</option>
                        <option value="march.. other months">March</option>
                      </select>
                      <select id="date_of_birth" class="form-control">
                        <option value="">Year</option>
                        <option value="1997">1998</option>
                        <option value="1996">1997</option>
                        <option value="1995">1996...</option>
                      </select>
                      <!-- input(id=field._id, placeholder=field._id).margin10p.form-control.input-lg-->
          </div>
        </div>
        <div class="row">
          <button class="btn btn-lg btn-warning">titiki putike dzerq tveq</button>
        </div>
      </form>

Answer 1

在覆盖css时执行此操作的一种方法：

Bootply ：http://www.bootply.com/123358

CSS ：

.datetimer .form-control{
    width : 100px;
    float: left;
    margin-left: 5px;
}

HTML ：

<div class="col-md-12"> 
  <div class="form-group datetimer">
              <select id="date_of_birth" class="form-control">
                <option value="">Day</option>
                <option value="0">1</option>
                <option value="1">2</option>
                <option value="2">3 ... removed the rest</option>
              </select>
              <select id="date_of_birth" class="form-control">
                <option value="">Month</option>
                <option value="january">January</option>
                <option value="february">February</option>
                <option value="march.. other months">March</option>
              </select>
              <select id="date_of_birth" class="form-control">
                <option value="">Year</option>
                <option value="1997">1998</option>
                <option value="1996">1997</option>
                <option value="1995">1996...</option>
              </select>
              <!-- input(id=field._id, placeholder=field._id).margin10p.form-control.input-lg-->
  </div>
</div>

可以使用Bootstrap 3加入表单字段吗？

1 个答案: