Как я могу сделать div полной ширины?
Даже после того, как у тела нет места по бокам, мой div все еще смещен по центру. У меня есть div, занимающий всю ширину экрана, как мне нужно, но я не могу его центрировать. Я заставил это сделать с левым полем, но на других экранах это не сработало. Какие-либо предложения?
CSS
div {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
section {
margin: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;
}
.div-with-bg {
background-image: url(../images/color1.jpg);
background-repeat: no-repeat;
background-color: grey;
/*this is needed to keep image proportion good*/
background-size: cover;
position:relative;
margin-left:0px;
border-left:0px;
padding-left:0px;
}
.div-no-sides {
/*margin: 0px 0px 0px 0px;*/
padding: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;
/*margin-left: -5em;*/
}
HTML
<section class = "hero div-no-sides" style = "width:100vw">
<div class = "container div-with-bg div-no-sides wide">
<div class = "col-md-12">
<h1>
Heading Goes Here
</h1>
<p class = "tagline">
Quick. Accurate. Reliable.
</p>
<a class = "btn btn-full" href = "#about">Get A Quote Today</a>
</div>
</div>
</section>
@BenTegoni Моя ссылка на загрузчик находится на странице макета. Я хочу, чтобы div растягивал полноэкранный режим, но когда я использую width: 100vw, он делает размер идеальным, но смещает его вправо, и мне нужно прокручивать по горизонтали, чтобы увидеть это.
результат, который я получаю, когда запускаю приведенный выше код, - это div, который отлично растягивается на весь экран, с этим нет проблем. Не могли бы вы предоставить фрагмент кода, который четко демонстрирует вашу проблему (тот, который вы действительно можете запустить), чтобы я мог правильно понять, что вы пытаетесь сказать.
Ответы 3
HTML
<div class = "container">
<div class = "row" style = "height:100px; background: #fff;"> this is ok</div>
<div class = "row row-full" style = "height:100px; background: #f00;">
this should take 100% width
</div>
</div>
CSS
.container{
background: gray;
min-height: 400px;
}
/*Can achive using vw css unit*/
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
height: 100px;
margin-top: 100px;
left: 50%;
}
Итак, используя свою HTML-структуру, вы можете использовать следующий CSS для центрирования текста:
html,body{
margin:0px;
padding:0px;
}
.div-with-bg {
background-image: url(../images/color1.jpg);
background-repeat: no-repeat;
background-color: grey;
/*this is needed to keep image proportion good*/
background-size: cover;
}
.container div {
text-align:center;
}
Технически, чтобы помочь ответить на ваш вопрос, a всегда будет изначально стремиться к полной ширине любого занимаемого пространства, независимо от того, ограничивается ли оно по ширине родительским узлом или тегом тела страницы. В частности, поскольку вы упомянули, что хотите, чтобы ваш текст был центрирован, вы должны включить это в объявление div нижнего уровня CSS.
Я переместил свой код со страницы индекса на страницу макета, и затем он начал работать, как задумано. Я считаю, что наличие @Renderbody на странице макета, которая отображалась на странице индекса, было причиной моей проблемы.
Вы спрашиваете, как центрировать div на странице? Или вы спрашиваете, как заставить div растягивать полноэкранный режим страницы. Ваш вопрос непонятен, уточните пожалуйста? Также вы используете сеточную систему начальной загрузки, но я не вижу добавления ссылки на начальную загрузку, также ваш col-md-12 не заключен в класс строки.