X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Выход за пределы колонок bootstrap
Prolific
Prolific
Topic Starter сообщение 7.7.2017, 11:27; Ответить: Prolific
Сообщение #1


Привет, форумчане. Верстаю сайт, не могу понять как выйти за пределы колонок, чтобы наложить bacground-color как на макете(там где contact info):
[img]http://i.imgur.com/RilMw38.png[/img]
То есть нужно сдвинуть вправо.

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

[img]http://i.imgur.com/A9ALR28.png[/img]

Код:
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;
        }
    }
}
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
сообщение 7.7.2017, 22:09; Ответить: Den1xxx
Сообщение #2


(Prolific @ 7.7.2017, 14:27) *
.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 не вкладываются друг в друга
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AlexZaw
AlexZaw
сообщение 7.7.2017, 22:14; Ответить: AlexZaw
Сообщение #3


(Den1xxx @ 8.7.2017, 01:09) *
CSS не вкладываются друг в друга

это less

попробуйте задать padding-right побольше
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Prolific
Prolific
Topic Starter сообщение 8.7.2017, 9:29; Ответить: Prolific
Сообщение #4


(AlexZaw @ 8.7.2017, 01:14) *
это less

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


Это SCSS)

Пробовал, блок съезжает вниз тогда.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AlexZaw
AlexZaw
сообщение 8.7.2017, 10:42; Ответить: AlexZaw
Сообщение #5


(Prolific @ 8.7.2017, 12:29) *
Это SCSS)

Да без разницы, препроцессор и ладно:)
а у родительских дивов ширина не задана? может она ограничивает?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Prolific
Prolific
Topic Starter сообщение 8.7.2017, 13:47; Ответить: Prolific
Сообщение #6


(AlexZaw @ 8.7.2017, 13:42) *
Да без разницы, препроцессор и ладно:)
а у родительских дивов ширина не задана? может она ограничивает?


Да, в этом и дело, что все запихано в container, он имеет фиксированную ширину, но как сделать так, чтобы форма и контакты были в один ряд как и сейчас, только блок с контактами растягивался вправо
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AlexZaw
AlexZaw
сообщение 8.7.2017, 15:19; Ответить: AlexZaw
Сообщение #7


Можно попробовать вывести форму и contact info из контейнера, если не получится, то прописать contact info псевдо элемент after или before и абсолютно спозиционировать его справа, по идее тогда ширина самого элемента не изменится, он останется на месте, а псевдоэлемент займет место до края экрана
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Prolific
Prolific
Topic Starter сообщение 8.7.2017, 15:57; Ответить: Prolific
Сообщение #8


(AlexZaw @ 8.7.2017, 18:19) *
Можно попробовать вывести форму и contact info из контейнера, если не получится, то прописать contact info псевдо элемент after или before и абсолютно спозиционировать его справа, по идее тогда ширина самого элемента не изменится, он останется на месте, а псевдоэлемент займет место до края экрана


Записал в .contact_info:
[CSS]
position: absolute;
right: 0;[/CSS]

Спасибо, что подсказал
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AlexZaw
AlexZaw
сообщение 8.7.2017, 16:51; Ответить: AlexZaw
Сообщение #9


Ну я маленько не это имел ввиду, но главное что сработало :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
сообщение 8.7.2017, 22:29; Ответить: Den1xxx
Сообщение #10


можно было row контейнер добавить — он имеет отрицательный маржин
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыWeb-разработка (C++/PHP/SQL/JS/Bootstrap). HighLoad проекты.
0 DF™ 1420 28.7.2020, 13:24
автор: DF™
Открытая тема (нет новых ответов) Ишем верстальшика - bootstrap
с опытом работы в bootstrap
18 AWARO 6354 13.8.2018, 0:34
автор: kalm
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыИзменить шаблон, сместить элементы bootstrap
1 Nemo 3242 16.4.2018, 23:30
автор: gruz333
Открытая тема (нет новых ответов) Недорогие услуги - php/js/mysql/jquery/bootstrap
2 vlads 3794 25.12.2017, 21:18
автор: xetedata
Открытая тема (нет новых ответов) Бесплатная верстка html,css,bootstrap. Подгоню на вордпресс.
0 archer88 1505 15.8.2017, 8:26
автор: -archer88-


 



RSS Текстовая версия Сейчас: 29.3.2024, 0:37
Дизайн