Bootstrap: используйте .pull-right без необходимости жесткого кодирования отрицательного поля

Это мой код (см. скрипку здесь):

<div class='container'>
    <div class='hero-unit'>
        <h2>Welcome</h2>

        <p>Please log in</p>
        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>
    </div>
</div>

Я хочу, чтобы #login-box имел .pull-right и был на той же высоте, что и p. Я могу использовать margin-top: -100px, но это неправильно.

Как я могу иметь #login-box на той же высоте, что и p без жесткого кодирования, отрицательный margin-top?

Ответ 1

Элементы float будут отображаться на линии, в которой они обычно находятся в макете. Чтобы исправить это, у вас есть два варианта:

Переместите заголовок и p после поля входа в систему:

<div class='container'>
    <div class='hero-unit'>

        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>

        <h2>Welcome</h2>

        <p>Please log in</p>

    </div>
</div>

Или заключите левый блок в div с выводом влево и добавьте clearfix внизу

<div class='container'>
    <div class='hero-unit'>

        <div class="pull-left">

          <h2>Welcome</h2>

          <p>Please log in</p>

        </div>

        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>

        <div class="clearfix"></div>

    </div>
</div>

Ответ 2

просто поместите #login-box, прежде чем <h2>Welcome</h2> будет в порядке.

<div class='container'>
    <div class='hero-unit'>
        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>
        <h2>Welcome</h2>

        <p>Please log in</p>

    </div>
</div>

здесь jsfiddle http://jsfiddle.net/SyjjW/4/

Ответ 3

Держите h2 сверху, затем потяните-налево на p и потяните-вправо в поле входа

<div class='container'>
  <div class='hero-unit'>

    <h2>Welcome</h2>

    <div class="pull-left">
      <p>Please log in</p>
    </div>

    <div id='login-box' class='pull-right control-group'>
        <div class='clearfix'>
            <input type='text' placeholder='Username' />
        </div>
        <div class='clearfix'>
            <input type='password' placeholder='Password' />
        </div>
        <button type='button' class='btn btn-primary'>Log in</button>
    </div>

    <div class="clearfix"></div>

  </div>
</div>

по умолчанию флаги по вертикали по умолчанию размещены в базовой линии, поэтому "Пожалуйста, войдите в систему" точно соответствует "Имя пользователя" (проверьте, изменив правое нажатие налево).