2016-08-02 21 views
-3

我是新來Bootstrap.I've創建的行&兩列內有大小8 & 4 respectively.In第一列中,我創建了一個很好&放一些元素在裏面。但問題是,有些元素不會留在井裏&從井裏出來..問題是什麼? 我的代碼HTML元素不留一個良好的內部

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

更多按鈕不留&失控。

回答

0

在日期前添加一個<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> 
相關問題