Two-column form in Bootstrap

Navigation
0

Good morning everyone,

I am doing a web form in ASP with Bootstrap in two columns and for the mobile version it does not keep me the width of the labels and it is a bit strange (I do not give many details because I think that seeing it will be more visual)

Desktop:

Mobile:

Code: 

<div class="form-horizontal">
<div class="col-sm-6">
    <div class="form-group">
        <label for="MainContent_text_reg_nombre" class="col-sm-4 control-label">Empresa*:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_nombre" id="MainContent_text_reg_nombre" class="form-control" type="text">
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_text_reg_telefono" class="col-sm-4 control-label">Teléfono:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_telefono" id="MainContent_text_reg_telefono" class="form-control" type="text">
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_text_reg_email" class="col-sm-4 control-label">Email:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_email" id="MainContent_text_reg_email" class="form-control" type="text">
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_text_reg_web" class="col-sm-4 control-label">Web:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_web" id="MainContent_text_reg_web" class="form-control" type="text">
        </div>
    </div>
</div>
<div class="col-sm-6">
    <div class="form-group">
        <label for="MainContent_text_reg_direccion" class="col-sm-4 control-label">Dirección:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_direccion" id="MainContent_text_reg_direccion" class="form-control" onkeyup="sync()" type="text">
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_text_reg_localidad" class="col-sm-4 control-label">Localidad:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_localidad" id="MainContent_text_reg_localidad" class="form-control" onkeyup="sync()" type="text">
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_text_reg_provincia" class="col-sm-4 control-label">Provincia:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_provincia" id="MainContent_text_reg_provincia" class="form-control" onkeyup="sync()" type="text">
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_text_reg_cp" class="col-sm-4 control-label">CP:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_cp" id="MainContent_text_reg_cp" class="form-control" onkeyup="sync()" type="text">
        </div>
    </div>
</div>

Any ideas?

Thanks in advance

    
asked by Andrés73 28.12.2016 в 12:03
source

2 answers

2

It should be a problem of something that you are configuring in your css, since your code is apparently fine, and it is more I try it and it adapts well the responsive

therefore you can verify that you do not have any align or something in your css that is affecting the boostrapp class

    
answered by 28.12.2016 / 13:45
source
1

Friend the structure of the code should be this 

<div class="form-group">
                <label for="phone" class="col-md-3 control-label">
                    <strong><span class="glyphicon glyphicon-phone" aria-hidden="true"></span></strong>
                </label>
                <input id="phone" name="phone" class="form-control" placeholder="Teléfono" value="">
        </div>

if you add a div col it will unzip the form

You must remove this div 

<div class="col-sm-8">

Or in case it does not work for you, you can use 

<dl class="dl-horizontal">
        <dt>[label del campo]</dt>
        <dd>[Tu Campo]</dd>
</dl>

which is another bootstrap structure widely used to align content.

    
answered by 28.12.2016 в 15:12
Avoid leaving the same text in two EditTexts Update records using PDO