Question

我正在创建我的网站的一部分，其中包括来自Bootstrap框架的Jumbotron和可折叠警报消息。我在警报框中遇到边距问题。我使用带有调整填充的Jumbotron的标准CSS，虽然不会干扰我的问题。

这就是未经修改的样子：

我希望警报框适合选择框的对齐方式。我尝试使用以下方法覆盖警报类的属性：

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

结果如下：

这对于左侧工作正常，但是在某种程度上不考虑边距权限属性。我通过将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，但这是一个粗略的版本，我认为近似你想要的。

使用＆＃34;整页＆＃34;片段底部的按钮可以在更宽的视图中查看结果。

＆＃13;

<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>

＆＃13;

Jumbotron的Bootstrap警报错误

1 个答案: