+ Ответить в теме
Страница 1 из 2 1 2 ПоследняяПоследняя
Показано с 1 по 10 из 12

Тема: Выход за пределы колонок bootstrap

  1. #1
    Новичок Prolific на пути к лучшему Аватар для Prolific
    Регистрация
    06.07.2017
    Сообщений
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Выход за пределы колонок bootstrap

    Привет, форумчане. Верстаю сайт, не могу понять как выйти за пределы колонок, чтобы наложить bacground-color как на макете(там где contact info):

    То есть нужно сдвинуть вправо.

    Вот как у меня сейчас выглядит:



    Код:
    HTML:
    <div class="section_main">
    <div class="container">
    <div class="row">
    <div class="col-md-6">
    <form action="/" method="POST">
    <input id="feedback_name" type="text" name="name" placeholder="Name" required>
    <input id="feedback_email" type="email" name="email" placeholder="Your Mail" required>
    <textarea id="feedback_textarea" name="message" cols="30" rows="5" placeholder="Type your message"></textarea>
    <input id="feedback_submit" type="submit" name="submit" value="Send message">
    </form>
    </div>
    <div class="col-md-5 col-md-offset-1 contact_info">
    <h5>Contact info</h5>
    <p id="adress">Jalalabad 24 / A, Ambaarkhana, Sylhet, Bangladesh</p>
    <p id="mail">redwan@deviserweb.com</p>
    <p id="number">(+88) 017 617 46373</p>
    </div>
    </div>
    </div>
    </div>



    CSS:
    .section_main {
    form {
    margin-top: 20px;
    input {
    &:focus {
    outline: none;
    }
    }
    #feedback_name {
    border-radius: 5px;
    border: none;
    background-color: #e5e5e5;
    padding: 20px 30px;
    width: 47%;
    margin-bottom: 30px;
    }
    #feedback_email {
    border-radius: 5px;
    border: none;
    background-color: #e5e5e5;
    padding: 20px 30px;
    width: 47%;
    float: right;
    margin-bottom: 30px;
    }
    #feedback_textarea {
    border-radius: 5px;
    border: none;
    background-color: #e5e5e5;
    padding: 20px 30px;
    width: 100%;
    margin-bottom: 30px;
    &:focus {
    outline: none;
    }
    }
    #feedback_submit {
    border-radius: 5px;
    border: none;
    background-color: #ff3b3b;
    padding: 20px 30px;
    width: 100%;
    color: #fff;
    @extend .bold;
    text-transform: uppercase;
    }
    }
    .contact_row {
    background-color: #2d2d2d;
    }
    .contact_info {
    //width: 50%;
    margin-top: 20px;
    padding: 50px 20px;
    background-color: #2d2d2d;
    h5 {
    @extend .bold;
    text-transform: uppercase;
    color: #e0e0e0;

    }
    p {
    color: #fff;
    }
    }
    }

  2. #2
    Модератор Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Аватар для Den1xxx
    Регистрация
    24.05.2011
    Адрес
    Гомель
    Сообщений
    2,501
    Thanks
    125
    Thanked 214 Times in 205 Posts
    Записей в дневнике
    9
    Цитата Сообщение от Prolific Посмотреть сообщение
    .contact_info {
    //width: 50%;
    margin-top: 20px;
    padding: 50px 20px;
    background-color: #2d2d2d;
    h5 {
    @extend .bold;
    text-transform: uppercase;
    color: #e0e0e0;

    }
    p {
    color: #fff;
    }
    }
    CSS не вкладываются друг в друга

  3. #3
    Пользователь AlexZaw на пути к лучшему Аватар для AlexZaw
    Регистрация
    21.06.2017
    Сообщений
    38
    Thanks
    0
    Thanked 9 Times in 8 Posts
    Цитата Сообщение от Den1xxx Посмотреть сообщение
    CSS не вкладываются друг в друга
    это less

    попробуйте задать padding-right побольше
    Последний раз редактировалось AlexZaw; 07.07.2017 в 20:16.

  4. #4
    Новичок Prolific на пути к лучшему Аватар для Prolific
    Регистрация
    06.07.2017
    Сообщений
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Цитата Сообщение от AlexZaw Посмотреть сообщение
    это less

    попробуйте задать padding-right побольше
    Это SCSS)

    Пробовал, блок съезжает вниз тогда.

  5. #5
    Пользователь AlexZaw на пути к лучшему Аватар для AlexZaw
    Регистрация
    21.06.2017
    Сообщений
    38
    Thanks
    0
    Thanked 9 Times in 8 Posts
    Цитата Сообщение от Prolific Посмотреть сообщение
    Это SCSS)
    Да без разницы, препроцессор и ладно:)
    а у родительских дивов ширина не задана? может она ограничивает?

  6. #6
    Новичок Prolific на пути к лучшему Аватар для Prolific
    Регистрация
    06.07.2017
    Сообщений
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Цитата Сообщение от AlexZaw Посмотреть сообщение
    Да без разницы, препроцессор и ладно:)
    а у родительских дивов ширина не задана? может она ограничивает?
    Да, в этом и дело, что все запихано в container, он имеет фиксированную ширину, но как сделать так, чтобы форма и контакты были в один ряд как и сейчас, только блок с контактами растягивался вправо

  7. #7
    Пользователь AlexZaw на пути к лучшему Аватар для AlexZaw
    Регистрация
    21.06.2017
    Сообщений
    38
    Thanks
    0
    Thanked 9 Times in 8 Posts
    Можно попробовать вывести форму и contact info из контейнера, если не получится, то прописать contact info псевдо элемент after или before и абсолютно спозиционировать его справа, по идее тогда ширина самого элемента не изменится, он останется на месте, а псевдоэлемент займет место до края экрана

  8. The Following User Says Thank You to AlexZaw For This Useful Post:

    Prolific (08.07.2017)

  9. #8
    Новичок Prolific на пути к лучшему Аватар для Prolific
    Регистрация
    06.07.2017
    Сообщений
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Цитата Сообщение от AlexZaw Посмотреть сообщение
    Можно попробовать вывести форму и contact info из контейнера, если не получится, то прописать contact info псевдо элемент after или before и абсолютно спозиционировать его справа, по идее тогда ширина самого элемента не изменится, он останется на месте, а псевдоэлемент займет место до края экрана
    Записал в .contact_info:

    position: absolute;
    right: 0;


    Спасибо, что подсказал

  10. #9
    Пользователь AlexZaw на пути к лучшему Аватар для AlexZaw
    Регистрация
    21.06.2017
    Сообщений
    38
    Thanks
    0
    Thanked 9 Times in 8 Posts
    Ну я маленько не это имел ввиду, но главное что сработало :)

  11. #10
    Модератор Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Den1xxx - просто великолепная личность Аватар для Den1xxx
    Регистрация
    24.05.2011
    Адрес
    Гомель
    Сообщений
    2,501
    Thanks
    125
    Thanked 214 Times in 205 Posts
    Записей в дневнике
    9
    можно было row контейнер добавить — он имеет отрицательный маржин

+ Ответить в теме

Похожие темы

  1. Как сделать выход из админки?
    от sergey-g в разделе PHP
    Ответов: 6
    Последнее сообщение: 23.01.2012, 13:50
  2. Выход за границы экрана
    от BigProfessor в разделе CSS
    Ответов: 1
    Последнее сообщение: 28.11.2011, 21:52
  3. Ответов: 1
    Последнее сообщение: 17.07.2010, 10:44
  4. Выход из скрипта при ошибке
    от Letmetouchyou в разделе PHP
    Ответов: 6
    Последнее сообщение: 10.11.2009, 16:58
  5. выход из приложения
    от loe666 в разделе HTML
    Ответов: 6
    Последнее сообщение: 07.05.2009, 11:30

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения