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>
clear:both
en la etiquetaform
.