Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 07.07.2017, 11:03   #1
Prolific
 
Регистрация: 07.07.2017
Сообщений: 9
Репутация: 10
По умолчанию Выход за пределы колонок 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;
		}
	}
}

Prolific вне форума   Ответить с цитированием
Ответ

Опции темы

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

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
SetCapture и выход курсора за пределы окна BLACK_RAIN Win Api 10 25.04.2015 15:20
Выход за пределы массива NFXrus Помощь студентам 10 09.12.2011 23:13
выход за пределы массива(с++) Lazy maximka Помощь студентам 2 13.11.2011 16:11
C++ выход за пределы строки (char) Alex11223 Помощь студентам 4 20.04.2011 20:27
C++ - выход за пределы массива kefir Помощь студентам 5 12.06.2010 14:09


20:56.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru