Необходимо получить пространство между двумя соседними рядами

-3

На bootstrap 3 я не могу сделать макет, как я хочу, и я не понимаю, почему.

Мой HTML:

        <div class="container">
           <div id="row1" class="row">
         <div class="col-lg-4 col-lg-push-8 col-md-4 col-md-push-8 col-sm-push-8 col-sm-4">
           <div class="round"></div>
         </div>
         <div class="col-lg-8 col-lg-pull-4 col-md-8 col-md-pull-4 col-sm-8 col-sm-pull-4 intro-text">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
         </div>
       </div>
       <div id="row2" class="row">
         <div class="col-lg-4 col-md-4 col-sm-4">
           <div class="round"></div>
         </div>
         <div class="col-lg-8 col-md-8 col-sm-8 intro-text">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
         </div>
       </div>
       </div>


My CSS :

    #row1 {
      opacity:0.3;
      background-color: red;
    }

    #row2 {
    opacity:0.3;
    background-color: yellow;
    }
    .intro-text {
     text-align:center;
    }
    .round {
     background:#bfd70e;
     border-radius:50%;
     width:160px;
     height:160px;
     border:2px solid #679403; 
     margin:0 auto;
     }
     @media(min-width:767px) {
      .intro-text {
      margin-top:60px;
      }
     #row2 {
     margin-top:-15px;
     }  
}

Я хочу сохранить ту же структуру, что и первая скрипта JS, но получить некоторое пространство, сделав строку 2 поверх первой. Поэтому я попробовал margin-top, но он сломал всю структуру, я не знаю почему.

Это скрипт JS без:

#row2 {
     margin-top:-15px;
     }

JS скрипка

Это JS скрипка с

#row2 {
         margin-top:-15px;
         }

JS скрипка

Как это исправить?

  • 0
    Почему вы используете -15px, это тянет его вниз. Я использовал "15px" и получил то, что, как мне кажется, вы ищете: jsfiddle.net/584wcaa5/1
  • 0
    Пожалуйста, сотрите свой ответ, так как это абсолютно не моя необходимость. Спасибо
Показать ещё 2 комментария
Теги:
twitter-bootstrap-3

2 ответа

0
Лучший ответ

Это потому, что элементы расположены статически, поэтому сталкиваются с элементами над ним.

Если вы укажете свою вторую position:absolute строки position:absolute она должна остановить ее столкновение с элементами, поскольку позиция устанавливается независимо от того, что делают другие элементы. https://jsfiddle.net/584wcaa5/2/

Поделиться
  • 0
    Это не работает, поскольку создает большие странности на экранах большого и среднего размера. Система сетки, кажется, сломана.
  • 1
    Я не совсем уверен в том, чего именно вы пытаетесь достичь. Можете ли вы смоделировать это в краске или что-то?
Показать ещё 3 комментария
1

Измените свой:

margin-top: -15px;

чтобы:

margin-top: 15px;

В противном случае вы потянете его.

https://jsfiddle.net/584wcaa5/1/

Поделиться
  • 0
    Это не моя потребность. Мне нужно получить место, сделав ряд 2 над первым. Пожалуйста, прочитайте внимательно в следующий раз, прежде чем сделать -1.
  • 0
    Вот что вы сказали по-английски: «Я хочу сохранить ту же структуру, что и первая скрипка JS, но получить некоторое пространство, сделав строку 2 над первой» ... вы сказали, что пространство GAIN ... положительное поле сделает вас GAIN пространство, если это не то, что вам нужно, может быть, вам нужно задать свой вопрос более тщательно.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню