Skip to main content
se añadieron 311 caracteres en el cuerpo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Al colocar unas tabspestañas en el panel-titlepanel-title, el formulario que tengo en el panel-primarypanel-primary llega hasta el limitelímite donde se inician los tabs.

El problema es esta clase: <div class="pull-right">

 . Si la quito, mi fornularioformulario toma todo el espacio del panel-primarypanel-primary pero los tabs se pegan a la izquierda sobre el titulotítulo.

Éste es mi código:

/*Panel tabs*/
.panel-tabs {
    position: relative;
    bottom: 30px;
    clear:both;
    border-bottom: 1px solid transparent;
}

.panel-tabs > li {
    float: left;
    margin-bottom: -1px;
}

.panel-tabs > li > a {
    margin-right: 2px;
    margin-top: 4px;
    line-height: .85;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    color: #ffffff;
}

.panel-tabs > li > a:hover {
    border-color: transparent;
    color: #ffffff;
    background-color: transparent;
}

.panel-tabs > li.active > a,
.panel-tabs > li.active > a:hover,
.panel-tabs > li.active > a:focus {
    color: #fff;
    cursor: default;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: rgba(255,255,255, .23);
    border-bottom-color: transparent;
}
<div<link class='container'>rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class='container'>
  <div class="panel panel-primary">
        <div class="panel-heading">
            <h6 class="panel-title" style=" font-size: 12px;">Traslados Presupuestarios</h6>
            <!-- SI COLOCO ESTA CLASE EN EL DIV, TODO EL RESTO DEL FORMULARIO SE CORRE A LA IZQUIERDA -->
            <div class="pull-right">
                <!-- Tabs -->
                <ul class="nav panel-tabs">
                    <li><a href="#tab1" data-toggle="tab">B</a></li>
                    <li><a href="#tab2" data-toggle="tab">I</a></li>
                </ul>
            </div>
        </div>
        <form class="form-horizontal">
          <fieldset>
            <div class="row">
                <div class="col-md-2" align="right">
                    <label for="inputEmail" class="control-label">Número de Solicitud</label>
                </div>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                </div>
                <div class="col-md-1" align="right">
                    <label for="inputEmail" class="control-label">Fecha</label>
                </div>
                <div class="col-lg-2">
                    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                </div>
                <div class="col-md-1" align="right">
                    <label for="inputEmail" class="control-label"></label>
                </div>
                <div class="col-md-2" align="right">
                    <label for="inputEmail" class="control-label">Disminuciones Bs.</label>
                </div>
                <div class="col-lg-2">
                    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="row">
                <div class="col-md-2" align="right">
                    <label for="textArea" class="control-label">Concepto</label>
                </div>
                <div class="col-md-10">
                    <textarea class="form-control" rows="2" id="textArea" placeholder="Email" style="font-size:11px;"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" align="center">
                    <button type="reset" class="btn btn-default btn-sm">Nuevo</button>
                    <button type="submit" class="btn btn-primary btn-sm">Siguiente</button>
                </div>
            </div>
          </fieldset>
        </form>
    </div>
</div>

Al colocar unas tabs en el panel-title, el formulario que tengo en el panel-primary llega hasta el limite donde se inician los tabs.

El problema es esta clase: <div class="pull-right">

  Si la quito mi fornulario toma todo el espacio del panel-primary pero los tabs se pegan a la izquierda sobre el titulo.

/*Panel tabs*/
.panel-tabs {
    position: relative;
    bottom: 30px;
    clear:both;
    border-bottom: 1px solid transparent;
}

.panel-tabs > li {
    float: left;
    margin-bottom: -1px;
}

.panel-tabs > li > a {
    margin-right: 2px;
    margin-top: 4px;
    line-height: .85;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    color: #ffffff;
}

.panel-tabs > li > a:hover {
    border-color: transparent;
    color: #ffffff;
    background-color: transparent;
}

.panel-tabs > li.active > a,
.panel-tabs > li.active > a:hover,
.panel-tabs > li.active > a:focus {
    color: #fff;
    cursor: default;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: rgba(255,255,255, .23);
    border-bottom-color: transparent;
}
<div class='container'>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h6 class="panel-title" style=" font-size: 12px;">Traslados Presupuestarios</h6>
            <!-- SI COLOCO ESTA CLASE EN EL DIV, TODO EL RESTO DEL FORMULARIO SE CORRE A LA IZQUIERDA -->
            <div class="pull-right">
                <!-- Tabs -->
                <ul class="nav panel-tabs">
                    <li><a href="#tab1" data-toggle="tab">B</a></li>
                    <li><a href="#tab2" data-toggle="tab">I</a></li>
                </ul>
            </div>
        </div>
        <form class="form-horizontal">
          <fieldset>
            <div class="row">
                <div class="col-md-2" align="right">
                    <label for="inputEmail" class="control-label">Número de Solicitud</label>
                </div>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                </div>
                <div class="col-md-1" align="right">
                    <label for="inputEmail" class="control-label">Fecha</label>
                </div>
                <div class="col-lg-2">
                    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                </div>
                <div class="col-md-1" align="right">
                    <label for="inputEmail" class="control-label"></label>
                </div>
                <div class="col-md-2" align="right">
                    <label for="inputEmail" class="control-label">Disminuciones Bs.</label>
                </div>
                <div class="col-lg-2">
                    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="row">
                <div class="col-md-2" align="right">
                    <label for="textArea" class="control-label">Concepto</label>
                </div>
                <div class="col-md-10">
                    <textarea class="form-control" rows="2" id="textArea" placeholder="Email" style="font-size:11px;"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" align="center">
                    <button type="reset" class="btn btn-default btn-sm">Nuevo</button>
                    <button type="submit" class="btn btn-primary btn-sm">Siguiente</button>
                </div>
            </div>
          </fieldset>
        </form>
    </div>
</div>

Al colocar unas pestañas en el panel-title, el formulario que tengo en el panel-primary llega hasta el límite donde se inician los tabs.

El problema es esta clase: <div class="pull-right">. Si la quito, mi formulario toma todo el espacio del panel-primary pero los tabs se pegan a la izquierda sobre el título.

Éste es mi código:

/*Panel tabs*/
.panel-tabs {
  position: relative;
  bottom: 30px;
  clear:both;
  border-bottom: 1px solid transparent;
}

.panel-tabs > li {
  float: left;
  margin-bottom: -1px;
}

.panel-tabs > li > a {
  margin-right: 2px;
  margin-top: 4px;
  line-height: .85;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
  color: #ffffff;
}

.panel-tabs > li > a:hover {
  border-color: transparent;
  color: #ffffff;
  background-color: transparent;
}

.panel-tabs > li.active > a,
.panel-tabs > li.active > a:hover,
.panel-tabs > li.active > a:focus {
  color: #fff;
  cursor: default;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background-color: rgba(255,255,255, .23);
  border-bottom-color: transparent;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class='container'>
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h6 class="panel-title" style=" font-size: 12px;">Traslados Presupuestarios</h6>
      <!-- SI COLOCO ESTA CLASE EN EL DIV, TODO EL RESTO DEL FORMULARIO SE CORRE A LA IZQUIERDA -->
      <div class="pull-right">
        <!-- Tabs -->
        <ul class="nav panel-tabs">
          <li><a href="#tab1" data-toggle="tab">B</a></li>
          <li><a href="#tab2" data-toggle="tab">I</a></li>
        </ul>
      </div>
    </div>
    <form class="form-horizontal">
      <fieldset>
        <div class="row">
          <div class="col-md-2" align="right">
            <label for="inputEmail" class="control-label">Número de Solicitud</label>
          </div>
          <div class="col-md-2">
            <input type="text" class="form-control" id="inputEmail" placeholder="Email">
          </div>
          <div class="col-md-1" align="right">
            <label for="inputEmail" class="control-label">Fecha</label>
          </div>
          <div class="col-lg-2">
            <input type="text" class="form-control" id="inputEmail" placeholder="Email">
          </div>
          <div class="col-md-1" align="right">
            <label for="inputEmail" class="control-label"></label>
          </div>
          <div class="col-md-2" align="right">
            <label for="inputEmail" class="control-label">Disminuciones Bs.</label>
          </div>
          <div class="col-lg-2">
            <input type="text" class="form-control" id="inputEmail" placeholder="Email">
          </div>
        </div>
        <div class="row">
          <div class="col-md-2" align="right">
            <label for="textArea" class="control-label">Concepto</label>
          </div>
          <div class="col-md-10">
            <textarea class="form-control" rows="2" id="textArea" placeholder="Email" style="font-size:11px;"></textarea>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12" align="center">
            <button type="reset" class="btn btn-default btn-sm">Nuevo</button>
            <button type="submit" class="btn btn-primary btn-sm">Siguiente</button>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</div>
se eliminaron 45 caracteres en el cuerpo
Origen Enlace
Shaz
  • 29.2k
  • 18
  • 40
  • 61

Buenas noches

Al colocar unas tabs en el panel-title, el formulario que tengo en el panel-primary llega hasta el limite donde se inician los tabs.

El problema es esta clase: <div class="pull-right">

Si la quito mi fornulario toma todo el espacio del panel-primary pero los tabs se pegan a la izquierda sobre el titulo

muchas gracias por su ayuda.

Buenas noches

Al colocar unas tabs en el panel-title, el formulario que tengo en el panel-primary llega hasta el limite donde se inician los tabs.

El problema es esta clase:

Si la quito mi fornulario toma todo el espacio del panel-primary pero los tabs se pegan a la izquierda sobre el titulo

muchas gracias por su ayuda

Al colocar unas tabs en el panel-title, el formulario que tengo en el panel-primary llega hasta el limite donde se inician los tabs.

El problema es esta clase: <div class="pull-right">

Si la quito mi fornulario toma todo el espacio del panel-primary pero los tabs se pegan a la izquierda sobre el titulo.

Origen Enlace

Problema con panel y formulario Bootstrap

Buenas noches

Al colocar unas tabs en el panel-title, el formulario que tengo en el panel-primary llega hasta el limite donde se inician los tabs.

El problema es esta clase:

Si la quito mi fornulario toma todo el espacio del panel-primary pero los tabs se pegan a la izquierda sobre el titulo

muchas gracias por su ayuda

/*Panel tabs*/
.panel-tabs {
    position: relative;
    bottom: 30px;
    clear:both;
    border-bottom: 1px solid transparent;
}

.panel-tabs > li {
    float: left;
    margin-bottom: -1px;
}

.panel-tabs > li > a {
    margin-right: 2px;
    margin-top: 4px;
    line-height: .85;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    color: #ffffff;
}

.panel-tabs > li > a:hover {
    border-color: transparent;
    color: #ffffff;
    background-color: transparent;
}

.panel-tabs > li.active > a,
.panel-tabs > li.active > a:hover,
.panel-tabs > li.active > a:focus {
    color: #fff;
    cursor: default;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: rgba(255,255,255, .23);
    border-bottom-color: transparent;
}
<div class='container'>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h6 class="panel-title" style=" font-size: 12px;">Traslados Presupuestarios</h6>
            <!-- SI COLOCO ESTA CLASE EN EL DIV, TODO EL RESTO DEL FORMULARIO SE CORRE A LA IZQUIERDA -->
            <div class="pull-right">
                <!-- Tabs -->
                <ul class="nav panel-tabs">
                    <li><a href="#tab1" data-toggle="tab">B</a></li>
                    <li><a href="#tab2" data-toggle="tab">I</a></li>
                </ul>
            </div>
        </div>
        <form class="form-horizontal">
          <fieldset>
            <div class="row">
                <div class="col-md-2" align="right">
                    <label for="inputEmail" class="control-label">Número de Solicitud</label>
                </div>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                </div>
                <div class="col-md-1" align="right">
                    <label for="inputEmail" class="control-label">Fecha</label>
                </div>
                <div class="col-lg-2">
                    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                </div>
                <div class="col-md-1" align="right">
                    <label for="inputEmail" class="control-label"></label>
                </div>
                <div class="col-md-2" align="right">
                    <label for="inputEmail" class="control-label">Disminuciones Bs.</label>
                </div>
                <div class="col-lg-2">
                    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="row">
                <div class="col-md-2" align="right">
                    <label for="textArea" class="control-label">Concepto</label>
                </div>
                <div class="col-md-10">
                    <textarea class="form-control" rows="2" id="textArea" placeholder="Email" style="font-size:11px;"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" align="center">
                    <button type="reset" class="btn btn-default btn-sm">Nuevo</button>
                    <button type="submit" class="btn btn-primary btn-sm">Siguiente</button>
                </div>
            </div>
          </fieldset>
        </form>
    </div>
</div>