1. дома
  2. Вопрос и ответ
  3. как разбить содержимое в сНу тега

как разбить содержимое в сНу тега

2016-05-17 4 views
0

Я пытаюсь дать перерыв внутри DIV в HTML, но я не получил решение, пожалуйста, помогите мне найти решение вот мой 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>

, пожалуйста, помогите мне найти решение

источник

2016-05-17 nushrat

+1

внимательно прочитайте классы сетки bootstrap перед их применением, каждый '.col - * - *' должен находиться внутри 'row' или' container' –

+0

, так что в чем проблема. Как я могу решить эту проблему, я хочу перерыв – nushrat

+0

также по по умолчанию все теги заголовков h1 ... h6 являются блочными элементами, что означает, что они всегда будут отображаться на новой строке, если только в extenally css, подобном сериальному классу bootstrap 'col- *', в вашем случае будет отображаться 'h5' как inline. – dreamweiver

ответ

2

Wrap всех ваши 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-12 до col-md-9 или лучше удалить div с классом col-md-12, потому что это бесполезно. –

+0

Если вы видите код «col-md-3» после 'col-md-9'. Может быть, OP имеет какое-то отношение к 'col-md-12', а затем к 3 и 9. Так что хорошо дать то, что хочет OP, вместо того, чтобы изменить его оригинальный дизайн, если мы не знаем его навсегда .. :) @GermanoPlebani –

+0

Thanx alot rao .. – nushrat

0

Простое решение является то, что вы заключите изображения в классе строки и h5 в другой класс строк.

Это создает 2 строки внутри класса col-md-9, как показано ниже.

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 код

<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

Смежные вопросы

 Смежные вопросы