Проблемы с сеткой Bootstrap (перекрывающиеся divs)

Question

Я знаю, что на этот вопрос уже дан ответ, но я действительно не понимаю, где я ошибаюсь.

У меня есть сетка с этой структурой:

<div class="row"> 
    <div class="row"> 
     <div class="left_content col-lg-8 col-sm-12"> 
      <div class="row"> 
       <div class="news_report col-lg-6 col-sm-6"> 

       </div> 

       <div class="news_report col-lg-6 col-sm-6"> 

       </div> 
      </div> 

      <div class="row"> 
       <div class="recursos_container col-xs-6"> 

       </div> 

       <div class="more_info_container col-xs-6"> 
        <div class="alerts_container"> 

        </div> 

        <div class="acces_to_catalog_container"> 

        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="app_info_container col-xs-12"> 
        <div class="app_left_content"> 

        </div> 

        <div class="app_right_content"> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="right_content col-lg-4 col-sm-12"> 
      <div class="row"> 
       <div class="twitter_container"> 
        <div class="twitter_header"> 

        </div> 

        <div class="twitter_content"> 

        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="blog_container"> 
        <div class="blog_side_header"> 

        </div> 

        <div class="blog_side_content"> 
         <div class="blog_side_post"> 

         </div> 

         <div class="blog_side_post"> 

         </div> 

         <div class="blog_side_post"> 

         </div> 

         <div class="blog_side_post"> 

         </div> 
        </div> 

        <div class="blog_side_footer"> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Контейнер твиттер перекрывает другие дивы. У меня есть немного беспорядка с классами начальной загрузки? Спасибо за помощь

Answer 1

Вы свертываете строку непосредственно под другой строкой. Всегда старайтесь держать строку под контейнером или столбцом div.

Вы можете либо изменить верхний родительскую строку в контейнер, как это:

<div class="container"> 
    <div class="row"> 
    <div class="left_content col-lg-8 col-sm-12"> 
     <div class="row"> 
      <div class="news_report col-lg-6 col-sm-6"> 

      </div> 

      <div class="news_report col-lg-6 col-sm-6"> 

      </div> 
     </div> 

ИЛИ вы можете добавить Col DIV под родительской строки так:

<div class="row"> 
    <div class="col-xs-12"> 
    <div class="row"> 
     <div class="left_content col-lg-8 col-sm-12"> 
     <div class="row"> 
      <div class="news_report col-lg-6 col-sm-6"> 

      </div> 

      <div class="news_report col-lg-6 col-sm-6"> 

      </div> 
     </div> 

Answer 2

Try следуя документацию Bootstrap, используя .container структуры> .row> колонки:

<div class="container"> 
    <div class="row"> 
     <div class="col-md-*"> 
     </div> 
    </div> 
</div> 

Где звездочка, независимо от размера вы пытаетесь использовать. Я не уверен, почему у вас есть строка, вложенная в строку, вложенную в строку.

Если вы хотите, чтобы она была полной, замените класс .container на .container-fluid.

Answer 3

Глядя на разметке и вашего вопроса не так много сказать.

Вы делаете что-то вроде этого:

<div class="row"> 
    <div class="row"> 
    <div class="left-content col-lg-8"></div> 
    </div> 
    <div class="row"> 
    <div class="right-content col-lg-4"></div> 
    </div> 
</div> 

Что представляет собой одну строку ниже другой. Но, может быть, вы ищете что-то вроде этого:

<div class="row"> 
    <div class="left-content col-lg-8"></div> 
    <div class="right-content col-lg-4"></div> 
</div> 

Который один ряд Раскол в двух секциях с различной шириной.