Há alguma forma no Bootstrap 3 de alinhar à direita um mergulho?
Estou ciente das possibilidades de compensação, mas quero alinhar um mergulho formatado à direita do seu contentor enquanto este deve ser centrado numa vista móvel de largura total. A classe ' pull-right' já não está a funcionar. Esqueceram-se de o substituir ou estou a perder algo óbvio?
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<!-- The next div has a background color and its own paddings and should be aligned right-->
<!-- It is now in the right column but aligned left in that column -->
<div class="yellow_background">right content</div>
</div>
</div>
</div>
Shure sei como fazer isto em CSS, mas pode ser feito em pura bootstrap 3?
A turma ainda está lá em Bootstrap 3 Ver as ' aulas de ajuda' aqui
pull-direita é definida por
.pull-right {
float: right !important;
}
sem mais informações sobre estilos e conteúdos, it's difícil de dizer.
É definitivamente um bom exemplo disto JSBIN. quando a página é mais larga do que 990px - que é quando o estilo col-md entra em acção, O Bootstrap 3 ser móvel em primeiro lugar e tudo.
Refere-se a algo como isto:
**HTML***
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<div class="yellow-background">
text
<div class="pull-right">right content</div>
</div>
</div>
</div>
</div>
**CSS***
.yellow-background {
background: blue;
}
.pull-right {
background: yellow;
}
Um exemplo completo pode ser encontrado em Codepen.
penso que se tenta alinhar o conteúdo à direita dentro do mergulho, o mergulho com offset já se empurra para a direita, aqui algum código e amostra AO VIVO:
FYI: .pull-right
apenas empurre o mergulho para a direita, mas não o conteúdo dentro do mergulho.
HTML:
<div class="row">
<div class="container">
<div class="col-md-4 someclass">
left content
</div>
<div class="col-md-4 col-md-offset-4 someclass">
<div class="yellow_background totheright">right content</div>
</div>
</div>
</div>
CSS:
.someclass{ /*this class for testing purpose only*/
border:1px solid blue;
line-height:2em;
}
.totheright{ /*this will align the text to the right*/
text-align:right;
}
.yellow_background{
background-color:yellow;
}
Outra modificação:
...
<div class="yellow_background totheright">
<span>right content</span>
<br/>image also align-right<br/>
<img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...
espero que resolva o seu problema