bootstrap3-一个div位于上一个（.well）的中间

Question

The text of the second div comes over the middle of the first div. 第二个div的文本位于第一个div的中间。 How would I prevent this? 我该如何预防？

1st div (row 12) contains 4 columns (row 3 each one) 第一个div （第12行）包含4列（每行3列）
2nd div contains a row 12 each one 2 div每行包含12行

<!doctype html>
<html>
    <head>
        <title>Solutions</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href = "css/bootstrap.min.css" rel = "stylesheet">
        <link href = "css/styles.css" rel = "stylesheet">
    </head>
    <body>
        <div class="row col-md-12" style="margin-top: 30px; height: auto;">
            <div class="col-md-3 text-center"  style="height: 250px;">
                <div>
                    <img src="http://placehold.it/150x80" style="height: 80px;"/>
                </div>
                <div class="well" style="margin-left : 0px; margin-top: 5px;">
                    <div>
                        Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
                    </div>
                </div>
            </div>
            <div class="col-md-3 text-center " style="height: 250px;">
                <div>
                    <img src="http://placehold.it/150x80" style="height: 80px;"/>
                </div>
                <div class="well" style="margin-left : 0px; margin-top: 5px;">
                    <div>
                        Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
                    </div>
                </div>
            </div>
            <div class="col-md-3 text-center " style="height: 250px;">
                <div>
                    <img src="http://placehold.it/150x80" style="height: 80px;"/>
                </div>
                <div class="well" style="margin-left : 0px; margin-top: 5px;">
                    <div>
                        Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
                    </div>
                </div>
            </div>
            <div class="col-md-3 text-center " style="height: 250px;">
                <div>
                    <img src="http://placehold.it/150x80" style="height: 80px;"/>
                </div>
                <div class="well" style="margin-left : 0px; margin-top: 5px;">
                    <div>
                        Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center" style="height: 60px; background-color: #3399cc;">
                <h2 style="color: white; margin-top: 0px; line-height: 60px;">THE TEXT THAT COMES OVER!!!!!!!!!!!!!!!!!!!!</h2>
            </div>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Answer 1

The solution is to add the folowing css to the first div - height: auto ; 解决方案是将以下css添加到第一个div- height中：auto ;

<!doctype html>
<html>
    <head>
        <title>Solutions</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href = "css/bootstrap.min.css" rel = "stylesheet">
        <link href = "css/styles.css" rel = "stylesheet">
    </head>
    <body>

        <div class="row col-md-12" style="margin-top: 30px; height: auto;">
            <div class="col-md-3 text-center"  style="height: auto;">
                <div>
                    <img src="http://placehold.it/150x80" style="height: 80px;"/>
                </div>
                <div class="well" style="margin-left : 0px; margin-top: 5px;">
                    <div>
                        Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
                    </div>
                </div>
            </div>
            <div class="col-md-3 text-center " style="height: 250px;">
                <div>
                    <img src="http://placehold.it/150x80" style="height: 80px;"/>
                </div>
                <div class="well" style="margin-left : 0px; margin-top: 5px;">
                    <div>
                        Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
                    </div>
                </div>
            </div>
            <div class="col-md-3 text-center " style="height: 250px;">
                <div>
                    <img src="http://placehold.it/150x80" style="height: 80px;"/>
                </div>
                <div class="well" style="margin-left : 0px; margin-top: 5px;">
                    <div>
                        Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
                    </div>
                </div>
            </div>
            <div class="col-md-3 text-center " style="height: 250px;">
                <div>
                    <img src="http://placehold.it/150x80" style="height: 80px;"/>
                </div>
                <div class="well" style="margin-left : 0px; margin-top: 5px;">
                    <div>
                        Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center" style="height: 60px; background-color: #3399cc;">
                <h2 style="color: white; margin-top: 0px; line-height: 60px;">THE TEXT THAT COMES OVER!!!!!!!!!!!!!!!!!!!!</h2>
            </div>
        </div>

     </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    </body>
</html>

bootstrap3-一个div位于上一个（.well）的中间

问题描述

1 个解决方案

解决方案1
0 2014-03-10 14:48:08

bootstrap3-一个div位于上一个（.well）的中间

问题描述

1 个解决方案

解决方案1 0 2014-03-10 14:48:08

解决方案1
0 2014-03-10 14:48:08