1

Amigos, preciso de um panel cujo título tenha um botão fechar dentro dele, à direita e responsivo. O código abaixo foi o mais próximo que consegui chegar usando botões. Muito grato pela ajuda.

preciso que fique com o X a direita sem perder a responsividade

<div class="container">
    <div class="row-fluid">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
              <div class="btn-group">
                 <label class="btn btn-lg btn-success">como deixar com o X a direita</label>
                 <label class="btn btn-lg btn-danger">
                    <span class="glyphicon glyphicon-remove"></span>                    
                 </label>              
              </div>
                  <div class="panel-body">
                    <form role="form">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Password" name="password" type="password" value="">
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input name="remember" type="checkbox" value="Remember Me">Remember Me
                                </label>
                            </div>                              
                        </fieldset>
                   </form>
                </div>
              <a href="index.html" class="btn btn-lg btn-success btn-block">texto</a>
           </div>
        </div>
    </div>
</div>

1 Resposta 1

1

Você pode usar a classe pull-right, ou então a classe close. Fiz um exemplo com o uso de cada uma dessas opções.

Agora eu não entendi o porque de você estar usando botões no título do panel.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row-fluid">
    <div class="col-md-4 col-md-offset-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <b>Título</b>
          <button class="btn btn-sm btn-danger pull-right"><span class="glyphicon glyphicon-remove"></span>
          </button>
        </div>
        <div class="panel-body">
          <form role="form">
            <fieldset>
              <div class="form-group">
                <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
              </div>
              <div class="form-group">
                <input class="form-control" placeholder="Password" name="password" type="password" value="">
              </div>
              <div class="checkbox">
                <label>
                  <input name="remember" type="checkbox" value="Remember Me">Remember Me
                </label>
              </div>
            </fieldset>
          </form>
          <a href="index.html" class="btn btn-lg btn-success btn-block">texto</a>
        </div>
      </div>
    </div>
    
    <div class="col-md-4 col-md-offset-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <b>Título</b>
          <a href="#" class="close"><span class="glyphicon glyphicon-remove"></a>
          </button>
        </div>
        <div class="panel-body">
          <form role="form">
            <fieldset>
              <div class="form-group">
                <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
              </div>
              <div class="form-group">
                <input class="form-control" placeholder="Password" name="password" type="password" value="">
              </div>
              <div class="checkbox">
                <label>
                  <input name="remember" type="checkbox" value="Remember Me">Remember Me
                </label>
              </div>
            </fieldset>
          </form>
          <a href="index.html" class="btn btn-lg btn-success btn-block">texto</a>
        </div>
      </div>
    </div>
  </div>
</div>

1
  • Muito obrigado pela ajuda parceiro. Eu usei botões para mostrar qual o efeito que preciso, que o botão de fechar seja da mesma altura do title, que ficando totalmente à direita fica parecido com esse exemplo. drive.google.com/file/d/0B5c-Iyxup6Z5ZkktTGV1b1djRnM/… Alguma ideia de como deixar no mesmo estilo da foto? Valeu
    – alexneto
    Commented 26/04/2015 às 17:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .