html - 使用 bootstrap，如何为 div 添加边距，但只能在 md 或更小的范围内？

Question

我有这两个 div:

<div class="col col-md-8">
    <input id="CampaignName" type="text" class="form-control" placeholder="Campaign Name">
</div>
<div class="col col-md-2">
    <button id="createCampaign" type="button" class="btn btn-default btn-sm">Create Campaign</button>
</div>

这在 lg 中很好，但是当屏幕折叠到 md 或更小的尺寸时，按钮位于文本框下方，并且它们彼此抱得太紧。

我想在它们之间添加一些边距，但如果屏幕是 lg 则不行。

Answer 1

您可以为此使用预定义的 Bootstrap 类 - 只需在输入和按钮之间插入额外的 div。并为 lg-viewport 隐藏此 div。

您可以根据需要改变它的高度。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col col-md-8">
    <input id="CampaignName" type="text" class="form-control" placeholder="Campaign Name">
 </div>

 <div class="hidden-lg hidden-md" style="height: 20px;"></div>

 <div class="col col-md-2">
      <button id="createCampaign" type="button" class="btn btn-default btn-sm">Create Campaign</button>
 </div>