Question

我有一些使用Bootstrap设计的div，但我只是给了它们内联CSS（我知道这不正确）并添加了一些填充和边距。

当点击按钮时，我会出现一个要显示的对象。而且可以看到可怕的重叠。

这是我的标记：

<div class="container" style="padding-top:150px;" ng-controller="ChangePDF as change">

    <div class="col-xs-1" style="margin-top:20px;">
        <ul class="nav nav-pills nav-stacked" ng-repeat="category in ['PTR Cuadrado','PTR Rectangular','Polín Z', 'Mallas','Lámina Lisa','Lámina Antiderrapante']">
            <li><button class="btn btn-success" style="width:150px; margin-top:7px; white-space: normal;" ng-click="change.changePDF(category)">{{category}}</button></li>
        </ul>
    </div>

    <div class="col-xs-11 text-center" style="padding-left:20px;">

        <div style="margin-top:120px" id="msg"><h3><span class="fa fa-sign-in"></span>Selecciona cualquiera de las categorías a la izquierda <br>para ver nuestra lista detallada de productos</h3></div>
        <div id="pdf" style="height:600px;"></div>
    </div>


</div>

即使是按钮也无法在某个区域获得锚属性，我认为是因为先前不可见的重叠。

点击按钮后，我删除了#msg

效果可以在这里看到：

http://www.gintegraconstruccion.com/html/catalogo.html

Answer 1

只需添加更多填充作为＆＃34; 120像素;＆＃34;在这一行

<div class="col-xs-11 text-center" style="padding-left:20px;">

这可以解决您的问题。

还有一件事，如你所知，内联风格真的是一种不好的做法。所以请尝试添加内部或外部CSS。

Answer 2

尝试使用此代码，它似乎正常工作：

<div class="container" style="padding-top:150px;" ng-controller="ChangePDF as change">

    <div class="col-xs-2" style="margin-top:20px;">
        <ul class="nav nav-pills nav-stacked" ng-repeat="category in ['PTR Cuadrado','PTR Rectangular','Polín Z', 'Mallas','Lámina Lisa','Lámina Antiderrapante']">
            <li>
                <button class="btn btn-success" style="width:150px; margin-top:7px; white-space: normal;" ng-click="change.changePDF(category)">{{category}}</button>
            </li>
        </ul>
    </div>

    <div class="col-xs-10 text-center" style="padding-left:20px;">

        <div style="margin-top:120px" id="msg">
            <h3><span class="fa fa-sign-in"></span>Selecciona cualquiera de las categorías a la izquierda <br>para ver nuestra lista detallada de productos</h3>
        </div>
        <div id="pdf" style="height:600px;"></div>
    </div>


</div>

Answer 3

问题在于您使用具有响应性的固定单位的方式，例如

容器宽度为1170px（这很好）但列分割不正确

col-xs-1 is 8.33% that comes to 97px

并将150px的指定宽度设置为col-xs-1 (97px)

内的按钮

解决方案

<div class="col-xs-2" style="margin-top:20px;">
</div>

<div class="col-xs-10 text-center" style="padding-left:20px;">
</div>

如何控制div重叠？

3 个答案: