Адаптивный верхний предел поля начальной загрузки

#twitter-bootstrap #margin

#twitter-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 правым, но в строке?

Ответ №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>
  

Обновить

Используйте pull-left вместо pull-right в h1 .

 <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/

Комментарии:

1. Спасибо за ваш ответ. Но я имею в виду, что изображение левое, а H1 находится прямо рядом с ним справа, но сверху.

2. @OleB. обновление сработало для вас или вы все еще сталкиваетесь с проблемой?