代码之家 › 专栏 › 技术社区 › Kyle

HTML引导表单域对齐方式

bootstrap-4 css html

0

Kyle · 技术社区 · 7 年前

我有一个很大的表单,所以整个向导中的许多字段都有相同的问题。“联系人电话号码”下的复选框将导致其余内容被逐出线路。

我已尝试将 页边距底部设置为 to 0 which does minimized the gap but it is still obligent.


   
    <div class=“form group”>
<label for=“联系人电话”style=“margin:0”>联系人电话号码<span style=“color:red;”>*</span></label>
<small style=“margin:0”><br>与您的主电话号码相同?</small>
<input type=“checkbox”name=“samenum”>
<input type=“text”class=“Form Control输入sm”/>
&L/DIV & GT;
如果删除<br>复选框,则该复选框与标签放在同一行。


我还尝试在联系人姓名字段下面添加一个占位符,如下所示:


<small><br>&nbsp;/small>
不过,这看起来相当糟糕


保持所有字段对齐的最佳方法是什么?


我试过设置margin-bottom到0这确实使间隙最小化,但仍然很明显。

<div class="form-group">
    <label for="contact_tel" style="margin: 0">Contact Telephone Number <span style="color:red;">*</span></label>
    <small style="margin: 0"><br>Same as your main telephone number?</small>
    <input type="checkbox" name="sameNum">
    <input type="text" class="form-control input-sm"/>
</div>


如果我移除<br>复选框与标签放在同一行。

我还尝试在contact name这样的字段:

 <small><br>&nbsp;</small>


不过,这看起来相当糟糕


保持所有字段对齐的最佳方法是什么?

2 回复 | 直到 7 年前

1

2

Ballsigno 7 年前

this is a very usual pattern
d-flex align-items-XXX flex

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<form>
  <div class="form-row d-flex align-items-end">
    <div class="form-group col-6" style="background-color: #F6CEE3;">
      <label for="test1">Test1</label>
      <input type="text" class="form-control " id="test1" placeholder="test1">
    </div>
    <div class="form-group col-6"  style="background-color: #A9E2F3;">
      <label for="contact_tel" style="margin: 0">Contact Telephone Number <span style="color:red;">*</span></label>
      <small style="margin: 0"><br>Same as your main telephone number?</small>
      <input type="checkbox" name="sameNum">
      <input type="text" class="form-control input-sm"/>
    </div>
  </div>
  <div class="form-row d-flex align-items-start">
    <div class="form-group col-6" style="background-color: #F6CEE3;">
      <label for="test2">Test2</label>
      <input type="text" class="form-control " id="test2" placeholder="test2">
    </div>
    <div class="form-group col-6"  style="background-color: #A9E2F3;">
      <label for="test3">test3</label>
      <input type="text" id="test3" class="form-control input-sm" placeholder="test3"/>
      <input type="checkbox" name="sameNum">          
      <label for="contact_tel" style="margin: 0">Contact Telephone Number <span style="color:red;">*</span></label>
      <small style="margin: 0"><br>Same as your main telephone number?</small>
    </div>
  </div>
</form>

2

0

djibe 7 年前

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 - HTML bootstrap form fields alignment</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thx to BS4)</p>
        <p>
          Answer to a question on Stackoverflow : <a href="https://stackoverflow.com/questions/51632452/html-bootstrap-form-fields-alignment" target="_blank">https://stackoverflow.com/questions/51632452/html-bootstrap-form-fields-alignment</a>
        </p>
        <h2>
          Tutorial
        </h2>
        <h2>
          Demo
        </h2>
        <div class="row">
          <div class="col-sm d-flex flex-column">
            <div class="form-group d-flex flex-column flex-fill justify-content-between">
              <label for="contactname">Contact name <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="contactname">
            </div>
          </div>
          <div class="col-sm">
            <div class="form-group">
              <label for="contact-tel">Contact telephone number <span class="text-danger">*</span></label>
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck1">
                <label class="custom-control-label mb-1" for="customCheck1">Same as main telephone number</label>
              </div>
              <input type="text" class="form-control" id="contact-tel">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm">
            <div class="form-group">
              <label for="contact-position">Contact position <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="contact-position">
            </div>
          </div>
          <div class="col-sm">
            <div class="form-group">
              <label for="contact-2">Accounts contact name <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="contact-2">
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>