在引导程序 3 中，为什么按钮不像 CSS 状态那样与列底部对齐？

Question

我正在使用 Bootstrap 3，并且正在尝试将按钮对齐到列的底部。 我似乎可以做到这一点的唯一方法是指定一个明确的高度并使用绝对定位。 由于我不希望所有列都以这种方式运行，所以我想知道 Bootstrap 3 中是否有内置的东西可以让我这样做？

 .mt { margin-top: 15px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-lg-12"> <div class="panel blank-panel"> <div class="panel-body"> <form> <div class="form-group"> <div class="col-sm-3 mt"> <label for="fname">First Name</label> <input type="text" id="fname" class="form-control"> </div> <div class="col-sm-3 mt"> <label for="lname">Last Name</label> <input type="text" id="lname" class="form-control"> </div> <div class="col-sm-2 mt"> <label for="gender">Gender</label> <select class="form-control"> <option value="" selected>Please Select</option> <option value="1">Female</option> <option value="2">Male</option> <option value="3">Unspecified</option> </select> </div> <div class="col-sm-2 mt"> <label for="birthDate" class="control-label">Date of Birth</label> <div class="input-group date" id="birthDateDiv"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input type="text" placeholder="mm/dd/yyyy" class="form-control" id="birthDate" name="birthDate" value=""> </div> </div> <div class="col-sm-2 mt" style="display: flex; justify-content: flex-start; align-items: flex-end;"> <button class="btn btn-sm btn-primary" type="submit" id="addPerson">Add Person</button> </div> </div> </form> </div> </div> </div>

Answer 1

间距基本需要加上缺少的label 。 我还在.btn中添加了.form-control ，以便更好地在移动设备中显示。 还可以考虑使用 .hidden .hidden-sm或类似文件在移动设备上隐藏虚拟label 。

 .mt { margin-top: 15px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-lg-12"> <div class="panel blank-panel"> <div class="panel-body"> <form> <div class="form-group"> <div class="col-sm-3 mt"> <label for="fname">First Name</label> <input type="text" id="fname" class="form-control"> </div> <div class="col-sm-3 mt"> <label for="lname">Last Name</label> <input type="text" id="lname" class="form-control"> </div> <div class="col-sm-2 mt"> <label for="gender">Gender</label> <select class="form-control"> <option value="" selected>Please Select</option> <option value="1">Female</option> <option value="2">Male</option> <option value="3">Unspecified</option> </select> </div> <div class="col-sm-2 mt"> <label for="birthDate" class="control-label">Birth</label> <div class="input-group date" id="birthDateDiv"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input type="text" placeholder="mm/dd/yyyy" class="form-control" id="birthDate" name="birthDate" value=""> </div> </div> <div class="col-sm-2 mt" style=""> <label for="dummy" class="control-label">&nbsp;</label> <button class="btn btn-primary form-control" type="submit" id="addPerson">Add Person</button> </div> </div> </form> </div> </div> </div>

Answer 2

如果要将button与底部对齐，则应将css设置应用于form-group 。 换句话说：

<div class="form-group" style="display: flex; align-items: flex-end;">

Answer 3

引导程序 3 已弃用。

解决方案：适应Bootstrap 5 。

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" /> <div class="col-lg-12"> <div class="panel blank-panel"> <div class="panel-body"> <form> <div class="form-group d-flex flex-wrap"> <div class="col-md-3 col-8 mt-3 px-2 ms-md-auto mx-auto"> <label for="fname">First Name</label> <input type="text" id="fname" class="form-control"> </div> <div class="col-md-3 col-8 mt-3 px-2 ms-md-auto mx-auto"> <label for="lname">Last Name</label> <input type="text" id="lname" class="form-control"> </div> <div class="col-md-2 col-8 mt-3 px-2 ms-md-auto mx-auto"> <label for="gender">Gender</label> <select class="form-select"> <option value="" selected>Please Select</option> <option value="1">Female</option> <option value="2">Male</option> <option value="3">Unspecified</option> </select> </div> <div class="col-md-2 col-8 mt-3 px-2 ms-md-auto mx-auto"> <label for="birthDate" class="control-label">Date of Birth</label> <div class="input-group date" id="birthDateDiv"> <input id="dateofbirth" class="form-control" type="date" /> </div> </div> <div class="col-md-1 col-8 mt-3 px-2 ms-md-auto mx-auto" style="display: flex; justify-content: flex-start; align-items: flex-end;"> <button class="btn btn-sm btn-primary" type="submit" id="addPerson">Add Person</button> </div> </div> </form> </div> </div> </div>