在Bootstrap中包装和垂直对齐复选框和单选按钮的最合适方法是什么？

Question

这是我在阅读和研究Bootstrap 2天后首次尝试使用Bootstrap构建表单。我被指示构建一个与旧的Access表单紧密匹配的表单。我已经在下面填写了表格的一部分。它是内联和水平的组合，您可以看到内联部分。

我在语法上是否正确？我这样做了吗？

Bootstrap建议的内联表单包装复选框和单选按钮的方法是什么？我在下面的例子中做得对吗？

如何在行内垂直对齐复选框/无线电？

任何爱或建议或建议总是受到赞赏。

＆＃13;

＆＃13;

.custom-margins {
  margin-top: 7px;
  margin-bottom: 7px;
}

.strong-border {
  border-top: 2px solid black;
}

.intro-row {
  margin-top: 15px;
  margin-bottom: 15px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="form-inline">



    <div class="row intro-row">


      <div class="form-group col-sm-6 col-md-5">
        <label for="Name" class="control-label">Name:</label>
        <input id="Name" name="Name" class="form-control" type="text" size="50" value="" readonly>
      </div>

      <div class="form-group col-sm-2 col-sm-offset-1 col-md-offset-2">
        <label for="EmployeeNbr" class="control-label">Emp No:</label>
        <input id="EmployeeNbr" name="EmployeeNbr" type="text" size="6" class="form-control" value="" readonly>
      </div>

      <div class="form-group col-sm-2 col-lg-3">
        <label for="SSN" class="control-label">SSN:</label>
        <input id="SSN" name="SSN" type="text" value="" class="form-control" size="11" readonly>
      </div>


    </div>


    <hr class="strong-border custom-margins">

    <div class="row custom-margins">


      <div class="form-group col-sm-3 col-md-4 col-lg-3">
        <label for="DateStamp" class="control-label">Verification Date:</label>
        <input id="DateStamp" name="DateStamp" class="form-control" type="text" size="10" value="" readonly>
      </div>

      <div class="form-group col-sm-3 col-md-4">
        <label for="LastPayDate" class="control-label">Last Pay Date:</label>
        <input id="LastPayDate" name="LastPayDate" class="form-control" type="text" size="10" value="" readonly>
      </div>


      <div class="col-sm-3 col-md-3">
        <label for="NotaryReq" class="control-label">Notary Required?  </label>
        <div class="checkbox">
          <input type="checkbox" id="NotaryReq" name="NotaryReq" value="1">
        </div>

      </div>
    </div>


    <hr class="strong-border custom-margins">

    <div class="row custom-margins">
      <div class="col-sm-2">
        <div class="form-group">
          <label for="Status" class="control-label">Status:</label>
          <input id="Status" name="Status" class="form-control" type="text" size="2" value="" readonly>
        </div>
      </div>
      <div class="col-sm-2 col-md-3">
        <div class="form-group">
          <label for="HireDate" class="control-label">Hire Date:</label>
          <input id="HireDate" name="HireDate" class="form-control" type="text" size="10" value="" readonly>
        </div>

      </div>
      <div class="col-sm-2 col-sm-offset-1 col-md-3 col-md-offset-0">
        <div class="form-group">
          <label for="TermDate" class="control-label">Term Date:</label>
          <input id="TermDate" name="TermDate" class="form-control" type="text" size="10" value="" readonly>
        </div>

      </div>
      <div class="col-sm-2 col-sm-offset-1 col-md-offset-0 col-md-4 text-right">
        <label class="control-label">Currently Employed?  </label>
        <div class="radio">
          <label class="radio-inline">Yes:  <input type="radio" id="EmpY" name="currentEmployee" value="true"></label>
        </div>
        <div class="radio">
          <label class="radio-inline">No:  <input type="radio" id="EmpN" name="currentEmployee" value="false"></label>
        </div>


      </div>
    </div>


  </div>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

是的，除了单选按钮之外，如果你想让标签可以点击，那么你应该使用与其他输入相同的方式

    <div class="radio">
      <label for="EmpY" class="radio-inline">Yes:</label>
      <input type="radio" id="EmpY" name="currentEmployee" value="true">
    </div>
    <div class="radio">
      <label for="EmpN" class="radio-inline">No:</label>
       <input type="radio" id="EmpN" name="currentEmployee" value="false">
    </div>