Bootstrap обивка/Маржа проблема в макете 3 колонки

-1

Учитывая макет так:Bootstrap обивка/Маржа проблема в макете 3 колонки

У меня есть следующие настройки HTML/CSS. Мне нужно, чтобы окружающий div соответствовал верхнему и нижнему центру изображения центра, но он, похоже, не работает. Он также ломается при изменении размера экрана и потери основного окружающего div при изменении цвета фона.

HTML

<div class="col-lg-12 contact"> 
    <div class="col-md-4"> 
    <div class="lib-panel"> 
     <h4>Let's get to work</h4> 
     <p>Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.</p> 
     <div class="btn btn-default">Button</div> 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="lib-panel"> 
     <div class="right-arrow"></div> 
    </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="lib-panel"> 
     <h4>Questions?</h4> 
     <p>Lorem ipsum dolorset amicum</p> 
     <div class="btn btn-default">Button</div> 
     <div class="btn btn-default">Button</div> 
    </div> 
    </div> 
</div>

CSS

.right-arrow { 
    display: inline-block; 
    position: relative; 
    background-image: url("http://placehold.it/300x250"); 
    padding: 15px; 
    height: 240px; 
    width: 300px; 
    margin-bottom: -25px; 
    margin-top: -10px; 
} 

.right-arrow:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 100%; 
    top: 50%; 
    margin-top: -10px; 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-left: 10px solid #dde1e2; 
} 

.contact { 
    background-color: #19223c; 
} 

.contact p, 
h4 { 
    color: $white; 
}

JSFIDDLE: https://jsfiddle.net/kh0prtc4/6/

источник

2016-02-16 user5935904

вы ищете что-то вроде этого: https://jsfiddle.net/kh0prtc4/3/ –

вы забыли использовать 'class =" row "и должны правильно изучить сетку начальной загрузки. – herrh

@AdamBuchananSmith - это на самом деле немного его сломает. Я просто пытаюсь получить исправление, так что изображение касается верхней и нижней части контейнера, как показано на изображении, представленном в вопросе. – user5935904

Вы должны использовать свои строки и контейнеров классов также, если вы хотите, чтобы быть больше или меньше в меньшие экраны, вы можете добавить классы col-sm-4 col-xs-12 или somethin г. Если вы хотите, чтобы ваш контейнер не имеют верхний и нижний отступы просто добавить

.contact .container{ 
    padding-top: 0; 
    padding-bottom: 0; 
}

Ваш HTML:

<div class="contact"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-4 col-sm-4 col-xs-12"> 
     <div class="lib-panel"> 
      <h4>Let's get to work</h4> 
      <p>Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.Lorem ipsum dolorset amicum.</p> 
      <div class="btn btn-default">Button</div> 
     </div> 
     </div> 
     <div class="col-md-4 col-sm-4 col-xs-12"> 
     <div class="lib-panel"> 
      <div class="right-arrow"></div> 
     </div> 
     </div> 
     <div class="col-md-4 col-sm-4 col-xs-12"> 
     <div class="lib-panel"> 
      <h4>Questions?</h4> 
      <p>Lorem ipsum dolorset amicum</p> 
      <div class="btn btn-default">Button</div> 
      <div class="btn btn-default">Button</div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

Вот скрипку Fiddle

источник

2016-02-16 18:41:12

Разобрался решение было лишь вопросом Маржа , Мне нужно добавить

margin-bottom: -25px; 
margin-top: -10px;

к .right-arrow класса для того, чтобы он соответствует контейнер.

источник

2016-02-16 18:46:44 user5935904

Вы всегда должны добавлять обновленную скрипку, если это возможно, вы можете изменить скрипт OP, нажать «Обновить» и использовать эту ссылку;) – miguelmpn

Bootstrap обивка/Маржа проблема в макете 3 колонки

ответ

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