Bootstrap form in responsive

Question

Bootstrap form in responsive

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I would like this form to be put in responsive, the labels would be placed to the left of the text entries, right now the label is placed above and below the text box. I've tried putting col-xs * aside but I can not get it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<form name="miFormulario1" class="form-horizontal ">
  <div class="form-group">
    <label class="col-md-2 control-label">Nombre:</label>
    <div class="col-md-10">
      <input type="text" id="idNombreT" name="txt_Nombre" class="form-control input-sm">
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">Seguimiento:</label>
    <div class="col-md-3">
      <select class="form-control input-sm col-md-1 " id="idSeguimiento">

      </select>
    </div>
    <div class="col-md-7 ">
      <button type="button" id="btnHistoria" class="btn btn-default btn-sm right-align ">Historia</button>
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-2 control-label">Descipcion:</label>
    <div class="col-md-10">
      <input type="text" id="idDescripcionT" name="txt_Descripcion" class="form-control input-sm">
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">Responsable:</label>
    <div class="col-md-10">
      <select class="form-control input-sm col-md-1 " id="idResponsable">

      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">Delegar a:</label>
    <div class="col-md-10">
      <select class="form-control input-sm col-md-1 " id="idDelegar">

      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2  control-label" id="idEstadoActualT">Estado Actual:</label>
    <div class="col-md-2">
      <select class="form-control input-sm col-md-1" id="idEstadoT" readonly>

      </select>
    </div>
    <div class="col-md-8">
      <input type="text" id="id_dscEstactual" name="txt_Descripcion" class="form-control input-sm">
    </div>
  </div>
</form>

bootstrap

asked by Lorenzo Martín 14.09.2018 в 13:33

source

2 answers

Problems when obtaining Latitude and Longitude in Xamarin Android I can not add a reference in Visual Studio 2017

score 0 · Answer 1

You may have to touch more things but if you look at the change of responsive, you will see that the class col-md-10 (associated with the input div) changes to float:left when the width of the page passes 992px which is what that makes it show in the place you want. In addition, you must take into account that the width of this div must be adjusted according to the space left free so that it can go on the same line as the label

score 0 · Answer 2

I imagine that with "when you put yourself in responsive" you mean reducing the width of the page, right? As for what "the labels are on the left", is not the same as when the design is wide?

Even so changing everything by col-xs-* works as you wish, although it would be necessary to know if there is any detail that we are going through something (that you have been able to omit in the question).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<form name="miFormulario1" class="form-horizontal ">
  <div class="form-group">
    <label class="col-xs-2 control-label">Nombre:</label>
    <div class="col-xs-10">
      <input type="text" id="idNombreT" name="txt_Nombre" class="form-control input-xs">
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-2 control-label">Seguimiento:</label>
    <div class="col-xs-3">
      <select class="form-control input-sm col-xs-1 " id="idSeguimiento">

      </select>
    </div>
    <div class="col-xs-7 ">
      <button type="button" id="btnHistoria" class="btn btn-default btn-sm right-align ">Historia</button>
    </div>
  </div>

  <div class="form-group">
    <label class="col-xs-2 control-label">Descripción:</label>
    <div class="col-xs-10">
      <input type="text" id="idDescripcionT" name="txt_Descripcion" class="form-control input-sm">
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-2 control-label">Responsable:</label>
    <div class="col-xs-10">
      <select class="form-control input-sm col-xs-1 " id="idResponsable">

      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-2 control-label">Delegar a:</label>
    <div class="col-xs-10">
      <select class="form-control input-sm col-xs-1 " id="idDelegar">

      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-2  control-label" id="idEstadoActualT">Estado Actual:</label>
    <div class="col-xs-2">
      <select class="form-control input-sm col-xs-1" id="idEstadoT" readonly>

      </select>
    </div>
    <div class="col-xs-8">
      <input type="text" id="id_dscEstactual" name="txt_Descripcion" class="form-control input-sm">
    </div>
  </div>
</form>

Perhaps it would be better to use <div class="form-group row"> than <div class="form-group"> to be able to give a fixed size col-* by default and one adapted col-*-* when increasing.