使用bootstrap在同一div中的顶部和底部对齐？

Question

I'm trying to align a row of buttons on the bottom but also have two rows of text at the top both justified left using twitter bootstrap. Here is what I'm trying to achieve:

Here is a jsfiddle of my recent attempt:

My current css files look like this:

.profile-avatar {
  position:relative; 
  height:170px;
}

.profile-avatar img {
  height: 160px;
  width: 160px;
  margin-left: 20px;
}


.profile-buttons {
  margin-left: 15px;
  margin-top: 110px;
}

I'm completely lost on how to add two rows of text to the top right of the image above the three buttons.

Any thoughts?

Thanks, -Paul

Answer 1

Try with position: absolute; (watch fiddle )

Answer 2

http://jsfiddle.net/kks6h0bc/7/

.text-0,.text-1{
    position: absolute;
    top: 0px;
   left: 200px;
    display:block;

}
.text-0{
    top: 0px;
    font-size:30px;
}

.text-1 {
    top: 50px;
}

Answer 3

Check this Fiddle . I Hope it helps.

<div class="row">
<div class="col-xs-12">
    <div class="row">
        <div class="col-xs-3">
            <div class="profile-avatar">
                <div class="row">
                    <div class="col-xs-12">
                       <img src="http://www.kanorika.com/friendly/demo/data/avatars/min4/SyWH14RnFCt.jpg" class="profile-img img-responsive"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-9">
            <div class="row">
                <div class="col-xs-12">
                    Large Text<br>Small Text
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <button type="button" class="btn btn-default profile-buttons">Default</button>
                    <button type="button" class="btn btn-default profile-buttons">Default</button>
                    <button type="button" class="btn btn-default profile-buttons">Default</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>