问题描述:

I'm building a website using Bootstrap and I'm now trying to make something like this:

===========================================================

| #################### |

| #################### Big Title |

| ##THIS IS AN IMAGE## |

| #################### |

| #################### Read more |

===========================================================

The problem is that I can't align the ReadMore button to the bottom. I tried using the tips in this SO answer, but to no avail. I created a fiddle of my code here and I'll paste my code below.

Does anybody know what I'm doing wrong here? All tips are welcome!

My HTML looks like this:

<div class="container">

<div class="row">

<div class="col-sm-8">

<a href="/thelink">

<article class="row property-ad">

<div class="col-sm-5">

<img class="img-responsive" src="image.png">

</div>

<div class="col-sm-7">

<div class="title">Big Title</div>

<button id="read-more" class="btn btn-default pull-right">Read more</button>

</div>

</article>

</a>

</div>

<div class="col-sm-4"><div class="row"></div></div>

</div>

</div>

and my css:

@media (min-width: 768px ) {

.row {

position: relative;

}

#read-more {

position: absolute;

bottom: 0;

right: 0;

}

}

网友答案:

Try this:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 @media (min-width: 768px) {
    .row {
        position: relative;
    }
    #read-more {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .col-sm-7 {
        position: absolute;
        width: 100%;
        height: 100%;
    }
}
<div class="container">
    <div class="row">
        <div class="col-sm-12"> <a href="/thelink">
                <article class="row property-ad">
                    <div class="col-sm-5">
                        <img src="//placehold.it/600x300" class="img-responsive"/>
                    </div>
                    <div class="col-sm-7">
                        <div class="title">Big Title</div>
                        <button id="read-more" class="btn btn-default pull-right">Read more</button>
                    </div>
                </article>
            </a>

        </div>
    </div>
</div>
网友答案:

Sometimes you have to work against bootstrap's floats to get what you're looking for, basically by not using them (pulls, etc). I've updated your fiddle, and I believe it's close to what you were asking. Another issue was your @media was throwing things off due to the size of the result window.

Updated Fiddle

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 .rel {
    position: relative;
    height:300px;
    width: 600px;
}
.read-more {
    position: absolute;
    bottom: 0;
    right: 0;
}
.background {
    background-image: url("http://placehold.it/600x300");
    height: 300px;
    width: 600px;
}
}
<div class="container rel"> <a href="/thelink">
                <article class="property-ad">
                    <div class="background img-responsive">
                        <div class="title">Big Title</div>

                    </div>
                </article>
                <button class="btn btn-default read-more">Read more</button>
            </a>

</div>
网友答案:

I added "col-xs" classes to your markup and it generated the desired display based on what you showed in your question

<div class="col-sm-5 col-xs-5">
                    <img src="//placehold.it/600x300" class="img-responsive"/>
                </div>
<div class="col-sm-7 col-xs-7">
                    <div class="title">Big Title</div>

If you plug that into your fiddle it displays the way you want with your media query. When you really shrink it down though it get's pretty illegible at that point.

Maybe you want to adjust the media query to display differently for "sm" and "xs".

网友答案:

There are two possible problems here - depending on what exaclty you want to achieve!

(I guess it's the second one you are looking for!)

First:
if you want to position your read more at the bottom right corner of the whole page:

You have position:relative in your CSS for .row.

This means all elements inside an element with class row will be positioned relative to this element - so your read more can only be positioned inside it with your CSS (with negative values for right and bottom it can be outside, but still relative to this element).

Second:
If you want to position your read more at the the bottom right corner of the article

The parent element to your #read-more has only height of 20px, because the text Big Title in the div above is only of that height.
As your #read-more element is positioned absolute, it doesn't contribute to the height.

I tried setting height: 100%; on the parent element of #read-more, but it doesn't work.
So, it seems, you will have to put your #read-more elemnt outside of its parent div, directly into the article, like this:

<div class="container">
<div class="row">
    <div class="col-sm-12">
        <a href="/thelink">
            <article class="row property-ad">
                <div class="col-sm-5">
                    <img src="//placehold.it/600x300" class="img-responsive"/>
                </div>
                <div class="col-sm-7">
                    <div class="title">Big Title</div>
                </div>
                <button id="read-more" class="btn btn-default pull-right">Read more</button>
            </article>
        </a>
    </div>
</div>

网友答案:

This is due to the right panel only being the height of the content, in this case the title and the button.

To counter this, you need to set a height.

I added the class box-height to the html and, as the image seems to max at 141px [At least for me, W7 PC], I set the container height to that height (141px)

You can see a working example here; http://jsfiddle.net/8pLjfq5u/18/

Without the height being given, the button will just fix itself to the height of the container, which in this case is set by the title height etc.

Edit

I would advise against setting css changes in bootstrap classes in this instance.

At some point, that change to the core CSS will bite you in the behind, when you need it to work as intended in the original build.

Second Edit

It would appear that if you simply move the button into a col-sm-12 div, that you can get the desired result.

This also scales into mobile view too, without the need to add additional classes or css attributes.

http://jsfiddle.net/8pLjfq5u/20/

相关阅读:
Top