Question

我有一个日历和一个按钮，但按钮略高于日历。有没有办法对齐项目，使其底部匹配。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <div class="input-group date" id="mystartDate">
        <input type="text" value="" name="startDate" class="form-control" />
        <span class="input-group-addon">
    					<span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <input type="button" class="btn btn-info" value="Getvalues" onclick="GetValues();" />
  </div>
</div>

Answer 1

当您全屏显示时，您的代码工作正常，因为md适用于桌面。您可以将div类更改为xs而不是md，您也可以在小屏幕上看到它。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-6">
    <div class="form-group">
      <div class="input-group date" id="mystartDate">
        <input type="text" value="" name="startDate" class="form-control" />
        <span class="input-group-addon">
    					<span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <input type="button" class="btn btn-info" value="Getvalues" onclick="GetValues();" />
  </div>
</div>

Bootstrap网格系统有四个类：xs（手机），sm（平板电脑），md（桌面）和lg（大型桌面）。可以组合这些类以创建更加动态和灵活的布局。

xs =超小屏幕（手机）
md =中等屏幕（某些桌面）

对齐日历输入和按钮，使其底部对齐

1 个答案: