" />

bootstrap 3 full width image and div in container

50847 просмотра

4 ответа

950 Репутация автора

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>
  1. What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?

  2. Page title and breadcrumbs height is 80px.
    If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row). How to fix it?

Автор: Lari13 Источник Размещён: 17.08.2014 11:04

Ответы (4)


1 плюс

1651 Репутация автора

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.

Автор: Kamil Размещён: 17.08.2014 11:58

8 плюса

806 Репутация автора

Решение

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:13

9 плюса

8333 Репутация автора

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">.

Updated Fiddle

Автор: Dan Размещён: 17.08.2014 03:51

0 плюса

2258 Репутация автора

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.

Автор: Phill Healey Размещён: 01.06.2015 10:45
Вопросы из категории :
32x32