Question

我在前端开发方面并不强大:)我使用bootstrap创建了一个表单。但它看起来并不好。我怎样才能将输入表格对齐一列？

＆＃13;

<form>
    <div class="form-group form-inline">
        <label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label>
        <input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
    </div>
    <div class="form-group form-inline">
        <label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label>
        <input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
    </div>
    <div class="col-md-12 text-center block-buttons">
        <button type="submit" class="btn btn-primary btn-lg">Continue</button>
    </div>
</form>

＆＃13;

enter image description here

Answer 1

使用display:table-*

＆＃13;

table {
  border-collapse: separate;
}

.form-inline {
  display: table-row;
}

.form-inline label, .form-inline input {
  display: table-cell;
  margin: 0 0 5px 10px;
}

＆＃13;

<form>
  <div class="form-group form-inline">
    <label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label>
    <input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
  </div>
  <div class="form-group form-inline">
    <label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label>
    <input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
  </div>
  <div class="col-md-12 text-center block-buttons">
    <button type="submit" class="btn btn-primary btn-lg">Continue</button>
  </div>
</form>

＆＃13;

Answer 2

尝试这样， bootstrap水平格式不支持 bootstrap -4 Not supported ，使用 bootstrap 3

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">





<form class="form-horizontal" action="/action_page.php">
    <div class="form-group">
      <label class="control-label col-sm-2" for="Purchase Price">Purchase Price</label>
      <div class="col-sm-4">
        <input type="email" class="form-control" id="exampleInputPrice" placeholder="$$$">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="Loan Amont">Loan Amont</label>
      <div class="col-sm-4">          
        <input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
      </div>
    </div>
   
   <div class="form-group">        
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Continue</button>
  </div>
</div>
  </form>

bootsrap-3 doc https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_horizontal&stacked=h

Answer 3

如果您使用的是bootstrap 4试试这个：

    <form>

  <div class="form-group row">
    <label for="exampleInputPrice" class="col-sm-2 col-form-label">Purchase Price</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
    </div>
  </div>

  <div class="form-group row">
    <label for="exampleInputLoan" class="col-sm-2 col-form-label">Loan Amont</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
    </div>
  </div>

    <div class="form-group form-inline">
        <button type="submit" class="btn btn-primary btn-lg">Continue</button>
    </div>
</form>

https://jsfiddle.net/sv2j08dd/3/

Answer 4

调制方式： 玻璃厚度：

的CSS： .inputs span {display：inline-block;宽度：60％;填充：0 0 15px 0; } .inputs span input {width：30％;向左飘浮;身高：25px;填充：0 5px;}

.inputs {width：100％; float：left; padding：0 25px; box-sizing：border-box;}

.inputs label {width：20％; float：left;}

如何对齐输入表单？

4 个答案: