Question

我是Bootstrap的新手。我创建了一个＆amp; amp;内部有两列，大小为8＆amp;分别在第一栏中，我创建了一个井＆amp;把一些元素放在里面。但问题是有些元素不能留在井内。走出井......问题是什么？我的代码

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

阅读更多按钮不会停留＆amp;出去了。

Answer 1

在日期之前添加<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>

HTML元素不会留在井中

1 个答案: