Bootstrap - новая линия на небольших устройствах

Question

Я использую Bootstrap и у меня есть эта строка:

<p>{{ user.email }} <span class="pull-right">{{ user.role }}</span></p> 

Как я могу сделать это так, чтобы промежуток идет на новой линии, если размер устройства «хз» ?

Answer 1

Вам, вероятно, придется использовать для этого специальный класс, так как класс pull-right будет вмешиваться, поскольку по умолчанию он установлен на !important.

Или вы можете переопределить его, используя !important в другом классе.

См. Рабочие примеры в фрагменте на полной странице.

body, html { 
 
    margin-top: 50px; 
 
} 
 
.new-class { 
 
    float: right; 
 
} 
 
@media (max-width: 767px) { 
 
    .new-class { 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .newer-class { 
 
    display: block; 
 
    float: none !important; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="alert alert-info"> 
 
    <p>email <span class="new-class">role</span> 
 

 
    </p> 
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <div class="alert alert-danger"> 
 
    <p>email <span class="newer-class pull-right">role</span> 
 

 
    </p> 
 
    </div> 
 
</div>