Я довольно новичок в бутстрапе, и я пытаюсь выяснить код для тестового сайта. Я столкнулся с проблемой с бутстрапом, я настроил элемент и поместил в него 2 элемента. Слева - абзац (который я планирую изменить на более крупный элемент позже), а справа - изображение (я не думаю, что размеры имеют значение). Я заметил, что элемент строки не занимал всю ширину экрана, и понял, что это связано с элементами, которые были внутри. Я зашел в свой CSS-файл для устранения неполадок, установил ширину строки класса до 100% и вернулся на свой сайт и открыл инструменты для разработчиков Chrome. Я заметил, что у контейнера div есть правое и левое поле с обеих сторон, что заставило строку div занимать меньше места и центрировать себя внутри элемента контейнера. Я установил как левое, так и правое значения для поля 0px и вернулся на сайт. Левое поле исчезло, и, несмотря на то, что инспекция Хром показала, что также нет правого края, он все еще появляется, когда я нависаю над элементом контейнера. Я не думаю, что это ошибка специфичности, поскольку левая маржа исчезла, но не права. Я действительно в тупике. Как я уже упоминал, я довольно новичок в Bootstrap, поэтому проблема может быть очевидна. Я проверил, чтобы убедиться, что я правильно набрал весь свой синтаксис для поля справа, и это выглядело нормально для меня. Однако код, который я вам показываю, не содержит изменений, внесенных в контейнер и строку. Код, который я показываю вам, является нормальным (кроме центрирования контейнера).Как заставить элемент строки занимать всю ширину?
Если возникли некоторые проблемы с нечетным интервалом, прошу прощения. Я вручную раскладывал 4 раза для каждой строки кода, поэтому, если есть 4 пробела, где их не должно быть, извиняюсь.
.header .jumbotron {
color: #fff;
background-color: #a1ff7c;
font-family: Roboto Condensed;
margin-bottom: 0px;
}
.navbar-default {
background-color: #78c45a;
border: 0px;
font-family: Roboto Condensed;
}
.gallery .container {
font-family: Roboto Condensed;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar- nav > .active > a:focus {
color: white;
/*BACKGROUND color for active*/
background-color: #78c45a;
}
.navbar-default .navbar-nav > .active > a:hover {
background-color: #5a9344;
color: #fff;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-default .navbar-nav > li > a:hover {
color: #fff;
background-color: #5a9344;
}
.navbar-default .navbar-brand {
color: #fff;
}
.navbar-default .navbar-brand:hover {
background-color: #5a9344;
color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-toggle {
border: 0px;
}
.navbar-default .navbar-toggle:hover {
background-color: #5a9344;
;
}
p {
font-family: Roboto Condensed;
}<html lang="en">
<head>
<title>Hope's Seed</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" h ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css? family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="jumbotron text-center">
<h1>Hope's Seed</h1>
<p>You're Not Alone</p>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="hopesseed.html">Hope's Seed</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">About</a>
</li>
<li><a href="#">Sponsors</a>
</li>
<li><a href="#">Donate</a>
</li>
<li><a href="#">Services</a>
</li>
<li><a href="#">More</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="Intro">
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>Enriching the lives of children who are medically fragile and terminally ill.</p>
</div>
<div class="col-sm-3">
<img src="Images/image1.png" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="gallery">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Family Support</h3>
<p>Hope's Seed is here to support you.</p>
</div>
<div class="col-sm-4">
<h3>Volunteer Opportunities</h3>
<p>Hope's Seed has many ways to volunteer.</p>
</div>
<div class="col-sm-4">
<h3>Giving Opportunities</h3>
<p>Enriching the lives of Texas children who are medically fragile and terminally ill.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Пожалуйста обеспечивает [mcve]. –
_Columns создает водосточные желоба (промежутки между содержимым столбца) через прокладку. Это заполнение смещается в строках для первого и последнего столбцов с помощью отрицательного поля на .rows._ Лучше всего сделать это через Документы: см. [Сетка] (https://getbootstrap.com/css/#grid), в частности, ** Введение ** о 'container' /' container-fluid' и 'row'. Вы также можете просмотреть CSS [здесь] (https://github.com/twbs/bootstrap/blob/v3.3.7/dist/css/bootstrap.css). – vanburen
@vanburen Спасибо! Я читал документы (особенно разницу между контейнером и контейнерной жидкостью). Я переключил контейнер на контейнерную жидкость, и он отлично работал! :) –