1. 首页
  2. 问答
  3. 如何打破div标签

如何打破div标签

2016-05-17 173 views
0

我想给在HTML DIV内休息中的内容，但我没有得到解决，请帮我找到解决办法 这里是我的html代码如何打破div标签

<div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="col-md-9"> 

        <h5>&nbsp&nbsp&nbsp&nbsp&nbsp Apartments</h5> 
        <hr> 
         <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0258.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8050.jpg');?>"></a></div> 
         <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0516.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8055.jpg');?>"></a></div> 
         <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0344.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8062.jpg');?>"></a></div> 
         <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_7784.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8073.jpg');?>"></a></div> 
         <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0501.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8082.jpg');?>"></a></div> 
         <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0213.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8104.jpg');?>"></a></div> 
         <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0334.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8393.jpg');?>"></a></div> 
         <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0466.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8473.jpg');?>"></a></div> 
         <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0406.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8498.jpg');?>"></a></div> 
         <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0329.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0138.jpg');?>"></a></div> 
         <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_7890.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0128.jpg');?>"></a></div> 
         <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0295.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0123.jpg');?>"></a></div> 
         <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0295.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0068.jpg');?>"></a></div> 
        <br/> 
         <h5>&nbsp&nbsp&nbsp&nbsp&nbsp Testimonials</h5> 
       </div> 
       <div class="col-md-3"> 
       </div> 
</div> 
</div> 
</div>

我想在下一行H5标签，但是当我加载页面然后显示到下一个图像的

<h5>&nbsp&nbsp&nbsp&nbsp&nbsp Testimonials</h5>

请帮我找到解决办法

来源

2016-05-17 nushrat

+1

在应用它们之前仔细阅读bootstrap网格类，每个'.col - * - *'必须位于'row'或'container'里面。 –

+0

所以问题是什么。如何解决这个问题我想要打破 – nushrat

+0

默认情况下，所有标题标签h1 ... h6都是块元素，这意味着它们将始终在新行上呈现，除非在您的情况下使用引导程序网格类'col- *'等外部css使'h5'显示为内联。 – dreamweiver

回答

2

总结所有col-* divs内div与class - row。你还可以使用text-centerclass类中可用的twitter bootstrap框架，而不是添加&nbsp;到h5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="col-md-9"> 
 

 
     <h5 class="text-center">Apartments</h5> 
 
     <hr> 
 
     <div class="row"> 
 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0258.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8050.jpg');?>"></a> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0516.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8055.jpg');?>"></a> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0344.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8062.jpg');?>"></a> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_7784.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8073.jpg');?>"></a> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0501.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8082.jpg');?>"></a> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0213.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8104.jpg');?>"></a> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0334.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8393.jpg');?>"></a> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0466.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8473.jpg');?>"></a> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0406.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8498.jpg');?>"></a> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0329.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0138.jpg');?>"></a> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_7890.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0128.jpg');?>"></a> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0295.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0123.jpg');?>"></a> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0295.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0068.jpg');?>"></a> 
 
      </div> 
 
      <br/> 
 
     </div> 
 
     <h5 class="text-center">Testimonials</h5> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-05-17 07:15:02

+0

引导程序在col-md-9之前需要col-md-12之后的另一个类行，或者更好的是使用class col-md-12删除div，因为这是无用的。 –

+0

如果您在'col-md-9'之后看到他有'col-md-3'的代码。可能是OP与'col-md-12'有关，然后与3和9有关。所以它很好地给出OP想要的，而不是改变他的原始设计，除非我们知道它的好处.. :) @GermanoPlebani –

+0

Thanx很多rao .. – nushrat

0

简单的解决方案是，你包围在一排类图像和H5的另一个排课。

这是在类col-md-9内创建2行，如下所示。

HTML代码：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="col-md-9"> 
       <div class="row"> 
       <h5>&nbsp&nbsp&nbsp&nbsp&nbsp Apartments</h5> 
       <hr> 
        <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0258.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8050.jpg');?>"></a></div> 
        <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0516.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8055.jpg');?>"></a></div> 
        <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0344.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8062.jpg');?>"></a></div> 
        <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_7784.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8073.jpg');?>"></a></div> 
        <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0501.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8082.jpg');?>"></a></div> 
        <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0213.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8104.jpg');?>"></a></div> 
        <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0334.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8393.jpg');?>"></a></div> 
        <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0466.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8473.jpg');?>"></a></div> 
        <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0406.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8498.jpg');?>"></a></div> 
        <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0329.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0138.jpg');?>"></a></div> 
        <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_7890.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0128.jpg');?>"></a></div> 
        <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0295.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0123.jpg');?>"></a></div> 
        <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0295.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0068.jpg');?>"></a></div> 

      </div> 
      <div class="row"> 
        <h5>&nbsp&nbsp&nbsp&nbsp&nbsp Testimonials</h5> 
      </div> 
      </div> 
      <div class="col-md-3"> 
      </div>

来源

2016-05-17 07:22:30 dreamweiver

1

简单的解决办法是把图象的div类行的div和然后提供
例

HTML CODE

<div class="container"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="col-md-9"> 

     <h5>Apartments</h5> 
     <hr> 
     <div class="row"> 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0258.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8050.jpg');?>"></a></div> 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0516.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8055.jpg');?>"></a></div> 
      <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0344.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8062.jpg');?>"></a></div> 
      <br/> 
     </div> 
     <h5>Testimonials</h5> 
     </div> 
     <div class="col-md-3"> 
     </div> 
    </div> 
    </div> 
</div>

来源

2016-05-17 07:33:04

相关问题

 相关问题