Question

我试图将我的“图像持有者”（头像）定位在底部和顶部~3px; 但当我这样做时，图像持有者走出了网格...... 这是代码：

<div class="container container-main">
    <div class="jumbotron jumbotron-acc" style="padding:20px; margin-top:10px;">
        <div class="container-heading">My Account</div>
    </div>
    <div class="col-md-3" style="margin-bottom:15px;">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#" class="">Account information</a>
            </li>
            <li><a href="#" class="">Deposit</a>
            </li>
            <li><a href="#" class="">Withdraw</a>
            </li>
            <li><a href="#" class="">My Tickets</a>
            </li>
            <li><a href="#" class="">transaction History</a>
            </li>
            <li><a href="#" class="">Perferences</a>
            </li>
        </ul>
    </div>
    <div class="col-md-8 col-upload">
        <img src="http://placehold.it/140x140" class="avatar">
        <button class="btn btn-warning btn-up">Upload Photo</button>
    </div>
</div>

头像的css代码:(我应该更改什么才能让它留在顶部/底部3px的网格中？）

.avatar{
 position: inherit;
 bottom: 3px;

 border-bottom-right-radius: 5px;
       -moz-border-radius-bottomright: 5px;
       -webkit-border-bottom-right-radius: 5px;
     border-top-right-radius: 5px;
      -moz-border-radius-topright: 5px;
      -webkit-border-top-right-radius: 5px;

      border-bottom-left-radius: 5px;
       -moz-border-radius-bottomright: 5px;
       -webkit-border-bottom-left-radius: 5px;
     border-top-left-radius: 5px;
      -moz-border-radius-topright: 5px;
      -webkit-border-top-left-radius: 5px;
 }

Answer 1

不要将 bottom：3px （删除它）应用于头像，而应用 padding：3px 15px; 到父 col-upload （父div）。

.col-upload{
padding: 3px 15px;
}

以下是一个示例：http://jsfiddle.net/o5v0eu71/

如何让头像留在自举网格中？

1 个答案: