Question

我使用bootstrap 4表单和bootstrap网格。用户应该添加温度（如果存在），否则用户应该选择＆＃34; N.A。＆＃34;单选按钮。

如何正确对齐两个不同的元素。我创建了这个例子：

<div class="container">
<form>
  <div class="form-group row">
    <label class="col-form-label col-6" for="">Temperature</label>

    <div class="col-6">
      <div class="input-group">
        <span class="input-group-addon">
          <input type="radio" name="gridRadios">
        </span>
        <input type="text" class="form-control">
        <span class="input-group-addon">°C</span>
      </div>

       <div class="form-check">
         <label class="form-check-label">
           <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
           N.A.
         </label>
      </div>

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

Answer 1

你需要在行中正确对齐元素，看看这可能会对你有帮助

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  

     <form class="form-inline" role="form">
      <div class="form-group">
      <label class="col-form-label" for="">Temperature</label>
      &nbsp; &nbsp
      </div>
     <div class="form-group">
      <div class="input-group">
            <span class="input-group-addon">
              <input type="radio" name="gridRadios">
            </span>
            <input type="text" class="form-control">
            <span class="input-group-addon">°C</span>
          </div>
    </div>
  &nbsp; &nbsp
    <div class="form-group">
      <div class="radio">
        <label class="radio-inline control-label">
          <input type="radio" id="amount_25" name="amount" value="25" checked="">
          N.A
        </label>
      </div>
    </div>
   
    </form>

＆＃13;

展开代码段（整页）以在大显示屏上查看

将radio input-group-addon与bootstrap 4中的无线电表格检查对齐

1 个答案: