bootstrap 3 full width image and div in container
50847 просмотра
4 ответа
I'm trying to set some divs to width: 100%
on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image
http://placehold.it/350x150
width: 100%
, including no paddings or margins?Page title and breadcrumbs height is
80px
.
If I resize window to smaller screen (e.g. mobile), textMain page > page
disappears (it's somewhere but not on own row). How to fix it?
Ответы (4)
8 плюса
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height
of .gray
class to auto
:
@media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px
, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
Автор: Davion Размещён: 17.08.2014 02:139 плюса
Use <div class="container-fluid">
. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid
.
In your code you have what appears to be body
content in your header
and you also have a div class="container"
outside of your header
and footer
. This is not correct, you should have your container/container-fluid
inside of your body. Also for your header you should use <nav="nav navbar-nav">
.
1 плюс
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page
disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px
there and as you said your breadcrumbs div has height: 80px;
, so try to reduce line-height
property and see how it works.
0 плюса
A simple way would be to remove the <div class="col-md-12">...</div>
and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you dont need any markup, eg just wrap it in <p>
tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row
tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
Вопросы из категории :
- css3 Создание закругленных углов с помощью CSS
- css3 Как я могу изменить порядок моих div с CSS?
- css3 Как заставить div заполнить оставшееся горизонтальное пространство?
- css3 Как нарисовать вертикальный текст с помощью кросс-браузера CSS?
- css3 Разверните div, чтобы взять оставшуюся ширину
- css3 Установить размер на фоновое изображение с помощью CSS?
- twitter-bootstrap В чем разница между CLASSPATH "записями начальной загрузки" и "записями пользователей" в Eclipse?
- twitter-bootstrap Что делает селектор [class ^ = "span"]?
- twitter-bootstrap How to enable scrolling of content inside a modal?
- twitter-bootstrap How to Automatically Close Alerts using Twitter Bootstrap
- twitter-bootstrap Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
- twitter-bootstrap Как переписать стили в Twitter Bootstrap
- twitter-bootstrap-3 Пять одинаковых столбцов в твиттере
- twitter-bootstrap-3 Как я могу заставить кнопки Twitter-Bootstrap правильно выравниваться?
- twitter-bootstrap-3 Говорит ли решарс, что класс css неизвестен, потому что он находится на CDN?
- twitter-bootstrap-3 Twitter Bootstrap 3 Sticky Footer
- twitter-bootstrap-3 Высота CSS работает, но минимальная высота не работает
- twitter-bootstrap-3 Центрирование полей ввода Bootstrap