html - Jumbotron 错误边距中的 Bootstrap 警报

Question

我正在创建我的网站的一部分，其中包括一个 Jumbotron 和一个可折叠的警报消息，它们都来自 Bootstrap 框架。我对警告框的边距有疑问。我为 Jumbotron 使用标准 CSS 并调整了填充，但这不会影响我的问题。

这是未经修改的样子:

我希望警告框与选择框对齐。我尝试用这个覆盖警报类的属性:

.alert-custom-style {
    margin-left: 15px;
    margin-right: 15px;
    width: 100%;
}

结果在这里:

这对左侧确实有效，但不知何故没有考虑 margin-right 属性。我通过将 margin-left 放回 0px 来测试它，但它看起来就像第一张图片。我真的很想知道为什么左边距属性有效，而不是右边距属性。非常感谢任何建议或帮助。

这是 HTML 代码:

        <div class="jumbotron jumbotron-custom">
            <div class="row">
                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 top-buffer">
                    <!-- Dropdown List for the first country -->
                    <select id="country1" name="Country Selection 1" class="selectpicker" data-width="100%" data-style="btn-default" data-live-search="true" title="Choose..."></select>
                </div>

                <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 top-buffer">
                    <!-- Compare Button -->
                    <button id="btnSubmit" type="Submit" class="btn btn-success btn-block">Compare</button>
                </div>

                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 top-buffer">
                    <!-- Dropdown List for the second country -->
                    <select id="country2" name="Country Selection 2" class="selectpicker" data-width="100%" data-style="btn-default" data-live-search="true" title="Choose..."></select>
                </div>

                <!-- JavaScript file to handle the data management -->
                <script src="js/compare.js"></script>
                <!-- JavaScript file to handle the selection lists -->
                <script src="js/lists.js"></script>
            </div>

            <div class="row top-buffer">
                <div id="alert" class="collapse alert alert-custom-style col-lg-12 col-md-12 col-sm-12 col-xs-12" role="alert"> <!-- Collapsed by default -->
                    <strong>Warning: </strong><span id="alert-span">Please select at least two different countries</span>
                </div>
            </div>
        </div>

Answer 1

对于包含 top-buffer 类警报的行，尝试添加:

margin-left: 15px;
margin-right: 15px;

我没有你所有的 css，但这里有一个粗略的版本，我认为它近似于你想要的。

使用代码段底部的“整页”按钮以更宽的 View 查看结果。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
    <div class="jumbotron">
      <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 top-buffer">
        <!-- Dropdown List for the first country -->
        <select id="country1" name="Country Selection 1" class="selectpicker" style="width:100%;" data-width="100%" data-style="btn-default" data-live-search="true" title="Choose...">
        </select>
      </div>
      <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 top-buffer">
        <!-- Compare Button -->
        <button id="btnSubmit" type="Submit" class="btn btn-success btn-block" style="width:100%;">
          Compare
        </button>
      </div>
      <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 top-buffer">
        <!-- Dropdown List for the second country -->
        <select id="country2" name="Country Selection 2" class="selectpicker" style="width:100%;" data-width="100%" data-style="btn-default" data-live-search="true" title="Choose...">
        </select>
      </div>
      <div class="row top-buffer" style="margin-left: 15px; margin-right: 15px;">
      <div id="alert" class="collapse in alert alert-custom-style col-lg-12 col-md-12 col-sm-12 col-xs-12" role="alert" style="background-color: red;"> <!-- Collapsed by default -->
        <strong>Warning: </strong><span id="alert-span">Please select at least two different countries</span>
      </div>
    </div>
  </div>
</div>