推特引导程序 - HTML 元素不会留在井内



我是Bootstrap的新手;内部两列大小为8&4。在第一个专栏中,我创建了一个井&在里面放一些元素。但问题是有些元素没有留在井里;从井里钻出来。。怎么了?我的代码

<!--Page divider starts-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8">
                <div class="well" style="background: #fff;">
                    <a href="#">
                        <img src="images/1.jpg" width="200px" height="200px" align="left" class="img-responsive img-thumbnail" style="margin-right: 5px;" />
                        <h2>jQuery popups window with demos</h2>
                    </a>
                    <p class="text-justify">
                        jQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with demos
                        demosjQuery popup window with demosjQuery popup window with demosjQuery popup window with.
                    </p>
                    <span class="glyphicon glyphicon-time"></span> August 02,2016
                    <a href="#" class="btn btn-primary btn-lg pull-right">Read more</a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel" style="background: orange;">
                    <div class="panel-heading">
                        <h4 class="panel-title" style="color: #fff;">Recent Posts</h4>
                    </div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <a href="#">
                                <img src="images/3.jpg" width="100px" height="100px" align="left" class="img-responsive img-rounded" style="margin-right: 3px;" />
                                <h5 class="list-group-item-heading">Build your own contact form</h5>
                            </a>
                            <p class="list-group-item-text text-justify" style="font-size: 9pt;">
                                Contact forms are so needy in websites now a days.you can say that contact forms are the need of any website.There are many companies..
                            </p>
                        </li>
                        <li class="list-group-item">
                            <a href="#">
                                <img src="images/2.jpg" width="100px" height="100px" align="left" class="img-responsive img-rounded" style="margin-right: 3px;" />
                                <h5 class="list-group-item-heading">Build your own contact form</h5>
                            </a>
                            <p class="list-group-item-text text-justify" style="font-size: 9pt;">
                                Contact forms are so needy in websites now a days.you can say that contact forms are the need of any website.There are many companies..
                            </p>
                        </li>
                        <li class="list-group-item">
                            <a href="#">
                                <img src="images/1.jpg" width="100px" height="100px" align="left" class="img-responsive img-rounded" style="margin-right: 3px;" />
                                <h5 class="list-group-item-heading">Build your own contact form</h5>
                            </a>
                            <p class="list-group-item-text text-justify" style="font-size: 9pt;">
                                Contact forms are so needy in websites now a days.you can say that contact forms are the need of any website.There are many companies..
                            </p>
                        </li>
                        <li class="list-group-item">
                            <a href="#">
                                <img src="images/1.jpg" width="100px" height="100px" align="left" class="img-responsive img-rounded" style="margin-right: 3px;" />
                                <h5 class="list-group-item-heading">Build your own contact form</h5>
                            </a>
                            <p class="list-group-item-text text-justify" style="font-size: 9pt;">
                                Contact forms are so needy in websites now a days.you can say that contact forms are the need of any website.There are many companies..
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--Page divider ends-->

阅读更多按钮不会停留&下车。

在日期前添加<div class="row">,在按钮后添加</div>。该部分应该看起来像:

<div class="row">
    <span class="glyphicon glyphicon-time"></span> August 02,2016
    <a href="#" class="btn btn-primary btn-lg pull-right">Read more</a>
</div>

最新更新