【发布时间】：2017-03-01 19:54:05
【问题描述】：
我正在我的活动管理系统网站上创建一个表单，以便您创建活动。该页面在 Admin-LTE 模板上使用 Bootstrap。
我已将表格的一部分分成两列。右栏是输入事件的空格数的部分，左侧是输入事件的开始和结束日期和时间的部分。我首先为右侧编写了 HTML 代码，现在正在尝试编写左侧，但是由于某种原因，页面上引导行之间的空间发生了变化，尽管每一侧之间的唯一不同是将复选框更改为一个数字输入（我最终会在其中添加一个日期选择器下拉菜单，但是在我之前尝试过时发生了同样的问题）以及其他一些输入命名的更改。
<div class="box box-primary">
<div class="box-body">
<div class="input-group">
<span class="input-group-addon">Event Title</span>
<input type="text" class="form-control" placeholder="Event Title" id="txtEventTitle">
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Start Date</span>
<input type="number" class="form-control" placeholder="Start Date" id="dteEStart">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Start Time</span>
<input type="number" class="form-control" placeholder="Start Time" id="timeEStart">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">End Date</span>
<input type="number" class="form-control" placeholder="End Date" id="dteEEnd">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">End Time</span>
<input type="number" class="form-control" placeholder="End Time" id="timeEEnd">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-lg-8">
<div class="input-group">
<span class="input-group-addon">Male Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEMaleS">
</div>
</div>
<div class="col-lg-4">
<div class="checkbox"><label><input type="checkbox" id="cbxEMaleS">Unlimited Spaces</label></div>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="input-group">
<span class="input-group-addon">Female Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEFemaleS">
</div>
</div>
<div class="col-lg-4">
<div class="checkbox"><label><input type="checkbox" id="cbxEFemaleS">Unlimited Spaces</label></div>
</div>
</div>
</div>
</div>
</div>
</div>
【问题讨论】：
-
所以为了重现问题，复选框应该采用
number输入类型而不是checkbox？如果您查看forms.less，您会看到它在复选框中添加了margin-left: -20px，而bootstrap.css在各个方向上添加了4px 的边距。它不会对input type=number这样做。 -
抱歉，我不太理解您的评论。如果您检查我的代码底部，您将看到我使用的复选框。这些是右栏中的那些。如果我只是将这些复制并粘贴到左侧，则间距是正确的，但是当我将复选框更改为 AdminLTEs 示例页面中的输入字段示例时，间距会中断。
标签： html css twitter-bootstrap adminlte