Question

我不知道为什么，但是使用Twitter Bootstrap 3制作的网站上出现了一个奇怪的边缘。如果我擦除导致它的元素，则边距消失。但是元素（图像）被正确放置。

元素是我标有红色箭头here（第三个图像是女人和宝宝）。

我写了以下代码：

<div class="container">
    <div class="row">
        <div class="col-xs-4 col-md-4 col-lg-4">
            <div id="esc1">
            <img class="img-responsive center-block" alt="" src="img/escuela-1.png"></div>
        </div>
        <div class="col-xs-4 col-md-4 col-lg-4">
        <div id="esc2">
            <img class="img-responsive center-block" alt="" src="img/escuela-2.png"></div>
        </div>
        <div class="col-xs-4 col-md-4 col-lg-4">
        <div id="esc3">           
            <img class="img-responsive center-block" alt="" src="img/escuela-3.png"></div>
        </div>
    </div>
    </div>

网站的网址：Here

任何人都可以帮助我吗？提前谢谢！

Answer 1

用<div class="col-xs-12"></div>将你的div包裹在行内。现在你告诉divs以四块为单位显示，没有任何东西可以分成。

如果您将网格定义为col-xs-4，则BS3首先是移动的，因此您无需定义col-md和col-lg。如果您希望它在更大的屏幕上显示不同，您只需要这样做希望这会有所帮助。

Answer 2

您的问题出现在图片下面的框中：

<div class="row">
            <div class="container">
                <div class="col-xs-12 col-md-12 col-lg-12">
                    <div class="escuela-def">
                        <p>La primera y principal razón de ABC KINDERGARTEN es el reconocimiento del niño/a como sujeto desde el momento de su nacimiento.<br>
En ésta escuela se da una educación integral, que abarca todas las áreas en las que el niño pueda ser estimulado desde pequeño, para alcanzar su máximo desarrollo en un marco bilingüe conectado con la familia.</p>
            ...

                    </div>
                </div>
            </div>
        </div>

您需要反转.row和.container，请参阅以下代码：

<div class="container">
    <div class="row">
       <div class="col-xs-12 col-md-12 col-lg-12">
                        ...

       </div>
   </div>
</div>

Answer 3

<div class="row">
            <div class="container">
             <div class="row">
                <div class="col-xs-12 col-md-12 col-lg-12">
                  <div id="cartel2">
                    <div class="cartel-img"><img class="img-responsive center-block" alt="" src="img/cartel-centros-solo.png"> </div>
                  </div>

部分应该是：

<div class="**container**">
            <div class="**row**">
                <div class="col-xs-12 col-md-12 col-lg-12">
                  <div id="cartel2">
                    <div class="cartel-img"><img class="img-responsive center-block" alt="" src="img/cartel-centros-solo.png"> </div>
                  </div>

这使得保证金对我来说消失了。

如何摆脱Twitter Bootstrap 3中的特定保证金？

3 个答案: