As classes pull-right
e pull-left
não funcionam mais no Bootstrap v4 porque foram removidas.
Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
Existe um link do próprio Bootstrap que mostra as mudanças que ocorreram para a versão 4.
O Bootstrap 4 é uma grande reescrita de quase todo o projeto. As mudanças mais notáveis são resumidas imediatamente abaixo, seguidas de mudanças específicas de classe e comportamento em componentes relevantes.
No caso das classes comentadas .pull-left
e .pull-right
elas foram substituídas por outras classes, respectivamente .float-left
e .float-right
.
Além disso, elas foram incrementadas com os tamanhos de grid ao qual permite adicionar os tamanhos desejados, por exemplo .float-xs-right
ou .float-sm-left
e/ou outros relacionados. Não é necessário determinar um tamanho para cada elemento, é somente uma funcionalidade específica que pode ajudar em alguns casos.
Nesse caso da barra de navegação, você vai substituir os .pull
pela atual correspondente .float
:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-header float-left">
<a href="index.php" class="navbar-brand">
<small>
<img src="/logo.png" width="30px">Site
</small>
</a>
</div>
Veja também no snippet abaixo que se tentar adicionar a classe .pull-*
não funciona como esperado, devido a remoção do mesmo na versão do Bootstrap 4:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-header pull-right">
<a href="index.php" class="navbar-brand">
<small>
<img src="/logo.png" width="30px">Texto com classe pull-right
</small>
</a>
</div>
Diferente do .float-*
:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-header float-right">
<a href="index.php" class="navbar-brand">
<small>
<img src="/logo.png" width="30px">Texto com classe float-right
</small>
</a>
</div>
Interessante que você leia o changelog de mudanças completo para saber como migrar corretamente um projeto para a versão 4 do Bootstrap.