Bootstrap 保证金最高响应

Question

我在将 bootstrap 元素对齐到顶部时遇到问题。

这是html:

<div class="container">
    <div class="row">
        <img src="image.png" class="profileimg" />"
        <h1 class="view_name">John Doe</h1>
    </div>
</div>

这是 CSS:

.view_name {
    margin-left: 170px;
    margin-top: 0px;
}

H1 元素不会拉到顶部。怎么实现图片左h1元素右，但是排成一排？

Answer 1

您可以使用 Boostrap 的 pull-left 和 pull-right 类。

https://jsfiddle.net/tejashsoni111/u5suaLgw/

<div class="container">
    <div class="row">
        <img src="image.png" class="profileimg pull-left" />"
        <h1 class="view_name pull-right">John Doe</h1>
        <div class="clearfix"></div>
    </div>
</div>

更新

在 h1 中使用 pull-left 而不是 pull-right。

<div class="container">
    <div class="row">
        <img src="image.png" class="profileimg pull-left" />
        <h1 class="view_name pull-left">John Doe</h1>
        <div class="clearfix"></div>
    </div>
</div>

https://jsfiddle.net/tejashsoni111/u5suaLgw/1/

Bootstrap 保证金最高响应

Bootstrap margin top responsive

margin

twitter-bootstrap