如何在div标签内打破内容

Question

我试图在html中给div打破但是我没有得到解决方案请帮我找到解决方案 这是我的HTML代码

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

请帮我找到解决方案

Answer 1

使用col-* divs将div内的所有class - row包裹在text-center内。您还可以使用class框架中提供的课程twitter bootstrap  ，而不是将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>

<?php

$arr1 = Array
(
     Array
        (
            "recomendation_id" => 3588,
            "employee_id" => 90141063,
            "attendance_type_id" => 2,
            "start_dtm" => "2016-05-17 10:32:00",
            "end_dtm" => "",
            "request_message" => "test notif",
            "recomendation_status_id" => 1,
            "last_update_dtm" => "2016-05-17 10:32:43",
            "employee_name" => "Nike Yulistia Angreni",
            "attd_type_name" => "Permittance",
            "status_name" => "Request"
        )

);
$arr2 = Array
(
    Array
        (
            "valuator1" => "Wulan  Lastia Permana"
        )
);

print_r(array_replace_recursive($arr1,$arr2));

Answer 2

简单的解决方案是将图像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>

Answer 3

简单的解决方案是将图像封装在行类中，将h5封装在另一个行类中。

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

HTML CODE：

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