Como posso alinhar corretamente meus botões de inicialização do Twitter?


452

Eu tenho uma demonstração simples aqui:

http://jsfiddle.net/HdeZ3/1/

<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
</ul>

Eu tenho uma lista não ordenada e, para cada item da lista, desejo ter um texto à esquerda e depois um botão alinhado à direita. Eu tentei usar pull-right, mas isso atrapalha completamente o alinhamento. O que estou fazendo errado?


5
Por que esta pergunta está marcada com twitter-bootstrap-3 e twitter-bootstrap-2 , bem como twitter-bootstrap ?
Andrew Grimm

5
Porque é relevante para todas as versões desde 3/2013
Zim

Respostas:


693

Insira pull-rightno atributo de classe e deixe a inicialização arranjar os botões.

Para o Bootstrap 2.3 , consulte: http://getbootstrap.com/2.3.2/components.html#misc > Classes auxiliares> .pull-right.

Para o Bootstrap 3 , consulte: https://getbootstrap.com/docs/3.3/css/#helper-classes > Classes auxiliares.


Para o Bootstrap 4 , consulte: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

O pull-rightcomando foi removido e substituído porfloat-right ou em geral parafloat-{sm,md,lg,xl}-{left,right,none}


18
Eu não entendo essa resposta. Na pergunta, o código de exemplo já está usando pull-right.
guival

@guival Eu estava pensando a mesma coisa. stackoverflow.com/a/26546770/470749 implica que usar em buttonvez de inputfará diferença.
21718 Ryan

@ Ryan isso funciona em mim, tanto na entrada e botão
Lesther

@aronadaal É um trabalho para mim, obrigado!
Houari Zegai 26/03

249

No twitter bootstrap 3, tente a classe pull-right

class="btn pull-right"

4
Não mais, foi obsoleto a partir do v 3.1: getbootstrap.com/components/#dropdowns-alignment
ılǝ

9
+1 para destacar a alteração. Mas essa depreciação é apenas para o menu suspenso que foi substituído por .dropdown-menu-right. Não foi preterido como um todo.
Shawn Vader

você está certo, a documentação dizwe've deprecated .pull-right on dropdown menus
ılǝ

3
Eu tive que usar pull-right na div externa do grupo btn: <div class = "btn-group pull-right">
Gerfried

17
pull-rightusa float: right, recolhendo assim os conteúdos verticais uns sobre os outros. Enrole o botão com text-rightDIV como este -<div class="text-right">button...</div>
hashbrown

137

A classe "pull-right" pode não ser o caminho certo, porque nos usos "float: right" em vez de alinhar o texto.

Verificando o arquivo css do bootstrap 3, encontrei a classe "text-right" na linha 457. Essa classe deve ser a maneira correta de alinhar o texto à direita.

Algum código:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>


6
Eu acho que isso é melhor do que puxar para a direita, porque evita que o conteúdo vertical entre em colapso e evita a necessidade de adicionar mais marcações apenas para solucionar isso.
28515 Tony Wall

2
Obrigado. O problema com "pull-right" é que ele remove as margens dos botões. Isso mantém as margens, mas move os elementos para a direita. Perfeito!
PR Whitehead

Por que o texto à direita deve estar em div contendo este botão em vez de apenas class="btn btn-default text-right"no botão ???
Krystian Polska

50

Atualização 2019 - Bootstrap 4.0.0

A pull-rightclasse está agora float-rightno Bootstrap 4 ...

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

Também é melhor não alinhar a lista ul e usar elementos de bloco para as linhas.

É float-rightainda não está funcionando?

Lembre-se de que o Bootstrap 4 agora é flexbox e existem muitos elementos display:flexque podem impedir o funcionamento do float-right. Em alguns casos, as classes util gostam align-self-endou ml-autotrabalham para alinhar à direita elementos que estão dentro de um contêiner flexbox como um Bootstrap 4 .row, Card ou Nav.

Lembre-se também de que text-rightainda funciona em elementos embutidos.

Bootstrap 4 alinhar exemplos certos


Bootstrap 3

Use a pull-rightclasse.


Eles estão trabalhando para mim, mas você não precisa confiar nos links. Leia a resposta para obter uma explicação sobre como alinhar à direita.
Zim

19

Use buttontag em vez de inpute use pull-rightclass.

pull-right A classe bagunça totalmente os dois botões, mas você pode corrigir isso definindo a margem personalizada no lado direito.

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

Em seguida, use o seguinte CSS para a classe

.RbtnMargin { margin-left: 5px; }

18

Acrescentando à resposta aceita, ao trabalhar em contêineres e colunas construídos em preenchimento a partir do bootstrap, às vezes tenho uma coluna esticada completa com uma div filho que faz o puxão para ser o caminho a seguir.

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

Como alternativa, todas as suas colunas somam o número total de colunas da grade (12 por padrão), além de compensar a primeira coluna.

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

12

Desculpe por responder a uma pergunta já respondida mais antiga, mas pensei em apontar alguns motivos para o seu jsfiddle não funcionar, caso outros o verifiquem e se perguntem por que a classe pull-right, conforme descrito na resposta aceita, não trabalha lá.

  1. o URL para o arquivo bootstrap.css é inválido. (talvez tenha funcionado quando você fez a pergunta).
  2. você deve adicionar o atributo: type = "button" ao seu elemento de entrada, ou ele não será renderizado como um botão - ele será renderizado como uma caixa de entrada. Melhor ainda, use o <button>elemento.
  3. Além disso, como a opção pull-right usa flutuadores, você obterá um escalonamento impressionante no layout do botão, pois cada LI não possui altura suficiente para acomodar a altura do botão. A adição de alguns CSS de altura da linha ou altura mínima ao LI resolveria isso.

violino de trabalho: http://jsfiddle.net/3ejqufp6/

<ul>
  <li>One <input type="button" class="btn pull-right" value="test"/></li>
  <li>Two <input type="button" class="btn pull-right" value="test2"/></li>
</ul>

(Também adicionei uma largura mínima aos botões, pois não aguentava a aparência de uma aparência justificada à direita e irregular devido aos tamanhos variados :))


11

O uso do pull-rightauxiliar Bootstrap não funcionou para nós, pois utiliza float: right, o que força os inline-blockelementos a se tornaremblock . E quando os .btnse tornam block, eles perdem a margem natural que os inline-blockestava fornecendo como elementos quase textuais.

Então, em vez disso, usamos direction: rtl;o elemento pai, que faz com que o texto dentro desse elemento seja layout da direita para a esquerda, e que faz com que os inline-blockelementos sejam layout da direita para a esquerda. Você pode usar LESS como o seguinte para impedir que as crianças sejam dispostas rtltambém:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

e use-o como:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

7

No Bootstrap 4 : tente dessa maneira com o Flexbox. Veja a documentação em getbootstrap

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>




2

Você pode tentar um CSS personalizado, além do CSS de autoinicialização, para ver se há alguma alteração. Tentar

.move-rigth{
    display: block;
    float: right;
}

Se funcionar, você pode tentar manipular o que possui ou adicionar outra formatação a isso e obter o que deseja. Como você está usando o bootstrap, não significa que ele não oferece o que você deseja, mas apenas o gerencia. Você está trabalhando com seus códigos e, portanto, ordena que faça o que você diz. Felicidades!


5
não há necessidade de css personalizado, como a outra resposta mostra tudo o necessário está incluído na inicialização
chrisweb

@chrisweb E se você tiver outros plugins que compartilham a mesma classe CSS desconhecida para você e problemas conflitantes, o que você faz? Sentar e assistir a criar um CSS personalizado e seguir em frente? O OP nunca especificou se foram adicionados outros plugins que poderiam compartilhar as mesmas classes de css.
OmniPotens

2
<ul>
    <li class="span4">One <input class="btn btn-small" value="test"></li>
    <li class="span4">Two <input class="btn btn-small " value="test2"</li>
</ul>

eu apenas usei estilos layout..apply para li ..

ou

<ul>
    <li>One <input class="btn" value="test"></li>
    <li>Two <input class="btn" value="test2"</li>
</ul>

em CSS

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

Para mim, isso coloca ambos os itens da lista em uma única linha
deltanovember

2

você também pode usar colunas em branco para dar espaços à esquerda

gostar

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

Demo :: Jsfiddle demo


1

No Bootstrap V3.3.1, o seguinte estilo CSS resolverá esse problema

.modal-open{
    padding-right: 0 !important;
}

Nota: Tentei todas as sugestões nas postagens acima e em todos os endereços de versões anteriores e não forneço uma correção para as versões de inicialização do jornal.


-1

para documentação do bootstrap 4

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>

O que isso tem a ver com alinhar à direita e botões?
Zim
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.