在Bootstrap的Mobile-View中填充不能正常工作

Question

所以，我正在按照Web-View中的预期正确地使用Bootstrap填充工作， 但是在Mobile-View填充不能按预期工作， 我正在使用课程"col-sm-offset-3 col-md-3"进行Dropdown和 按钮col-sm-2 padding5px。

我想在Mobile-View中的下拉列表和按钮之间填充。

我找不到问题在哪里。

网络视图图片：

移动查看图片：

以下是代码：

<div class="form-group">
        <div class="col-sm-offset-3 col-md-3">
            <select id="ddlDownload" class="form-control"></select>
        </div>
        <div class="col-sm-2  padding5px">
            <button id="btnDownload" type="button" class="btn btn-primary" onclick="DownloadFile()">Download</button>
        </div>
    </div>

Answer 1

默认情况下，在bootstrap中没有顶部和底部填充以及cols之间的边距，你需要通过css添加自定义填充或边距，你可以尝试下面的代码

<div class="form-group">
        <div class="col-sm-offset-3 col-md-3">
            <select id="ddlDownload" class="form-control"></select>
        </div>
        <div class="col-sm-2" style="padding-top:5px">
            <button id="btnDownload" type="button" class="btn btn-primary" onclick="DownloadFile()">Download</button>
        </div>
</div>

如果您不想添加内联css（样式属性）。您可以在css文件中添加以下代码

#btnDownload{ 
  margin-top:5px;
} 

或用于填充

#btnDownload{
  padding-top:5px;
}

希望这会有用