Complex Form Bootstrap

Asked

Viewed 597 times

0

I am creating a customer registration form. I am using the Bootstrap v:3.3.7 framework my client registration template, will open in a new pop-up: width=1300, height=630. When my form is at this size, it gets everything in place, as in the image below: inserir a descrição da imagem aqui The problem is when I reduce it a little bit. it ends up distorting in such a way that it gets very strange: inserir a descrição da imagem aqui Someone would know me how I could work with the bootstrap properties, so I didn’t lose the proportions that way??

@model Smc.Dominio.Model.EntidadeJuridicas.ClienteEmpresa
@{
    <link href="~/Template/SmcLayout/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="~/Template/Css/smc_ligth.css" rel="stylesheet" />
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <style>
        .form-control-label {
            font-size: 12px;
            font-weight: 300;
        }

        .form-control-sm {
            border: 1px solid #ddd;
            font-size: 14px;
            height: 20px;
            text-transform: uppercase;
        }

        .container-fluid {
            margin: 0;
            padding: 0;
        }

        .custom {
            margin-top: 4px;
        }

        .custom-two {
            margin-top: -14px;
        }
    </style>
}

<div class="col-lg-12">

    <ul class="nav nav-tabs" id="myTab">
        <li><a href="#consulta" data-toggle="tab">Consulta</a></li>
        <li class="active "><a href="#cadastrar" data-toggle="tab">Cadastrar</a></li>

    </ul>

    <div class="tab-content">
        @*Tab Suporte Técnico*@
        <div class="tab-pane " id="consulta">2</div>
        @*Tab Principal*@
        <div class="tab-pane active" id="cadastrar">
            <div class="container-fluid">
                <div class="row">
                    <!--Dados Clientes-->
                    <div class="col-lg-6" style="">
                        <div class="row">
                            <div class="col-lg-2">
                                <div class="form-group">
                                    <label class="form-control-label">Código</label>
                                    <input class="form-control-sm" type="text" style="padding:0; border-radius:1px; width:52px" />
                                </div>
                            </div>
                            <div class="col-lg-3" style="margin-left:-37px">
                                <div class="form-group">
                                    <label class="form-control-label">Status Cliente</label>
                                    <select class="form-control-sm" style="padding:0; width:134px">
                                        <option>Pré-Cadastro</option>
                                        <option>Ativo</option>
                                        <option>Bloqueado</option>
                                        <option>Cancelado</option>
                                        <option>Inativo</option>

                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-7" style="margin-left:-49px;">
                                <div class="col-lg-3" style="margin-left:19px">
                                    <div class="form-group">
                                        <label class="form-control-label">Cadastro</label>
                                        <input class="form-control-sm" type="text" style="padding:0; width:78px;" />
                                    </div>
                                </div>
                                <div class="col-lg-4" style="margin-left:9px;margin-right: -116px;">
                                    <label class="form-control-label">usuário</label>
                                    <input class="form-control-sm" type="text" style="padding:0;width:139px" />
                                </div>
                            </div>
                            <div class="col-lg-4" style="margin-left: -85px;margin-right: -85px;margin-top: 7px;margin-bottom: -13px;">
                                <div class="form-group">
                                    <input type="checkbox" class="form-control-label" />&nbsp;Produtor Rural <br />
                                    <input type="checkbox" class="form-control-label" />&nbsp;Consumidor Final
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <fieldset style="border:1px solid #ddd">
                                    <div class="row">
                                        <div class="form-group custom" style="width:100%;">
                                            <label class="col-lg-4 form-control-label">Razão Social | Nome:</label>
                                            <div class="col-lg-9" style="padding:0; margin:0; margin-right:-69px; margin-left:-80px;">
                                                <input type="text" class="form-control-sm" style="min-width:100%" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group custom-two" style="width:100%;">
                                            <label class="col-lg-4 form-control-label" style="padding-left:44px;">Nome Fantasia:</label>
                                            <div class="col-lg-9" style="padding:0; margin:0; margin-right:-69px; margin-left:-80px;">
                                                <input type="text" class="form-control-sm" style="min-width:100%" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group custom-two" style="width:100%;">
                                            <label class="col-lg-4 form-control-label" style="padding-left:61px;">CNPJ | CPF:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:-80px;">
                                                <input type="text" class="form-control-sm" style="min-width:100px" />
                                            </div>

                                            <label class="col-lg-4 form-control-label text-center" style="padding-left:44px;">Insc. Estadual | RG:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:-33px;">
                                                <input type="text" class="form-control-sm" style="min-width:100px" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group custom-two" style="width:100%;">
                                            <label class="col-lg-4 form-control-label" style="padding-left:79px;">Suframa:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:-80px;">
                                                <input type="text" class="form-control-sm" style="min-width:100px" />
                                            </div>

                                            <label class="col-lg-4 form-control-label text-center" style="padding-left:49px;">Incrição Municipal:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:-33px;">
                                                <input type="text" class="form-control-sm" style="min-width:100px" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group custom-two" style="width:100%;">
                                            <label class="col-lg-4 form-control-label" style="padding-left:62px;">Sub. Trib IE:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:-80px;">
                                                <input type="text" class="form-control-sm" style="min-width:100px" />
                                            </div>

                                            <label class="col-lg-4 form-control-label text-center" style="padding-left:109px;">Cane:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:-33px;">
                                                <input type="text" class="form-control-sm" style="min-width:100px" />
                                            </div>
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="form-group custom-two" style="width:100%;">
                                            <label class="col-lg-4 form-control-label" style="padding-left:19px;">Ramo De Atividade:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:-80px;">
                                                <input type="text" class="form-control-sm" style="min-width:100px" />
                                            </div>

                                            <label class="col-lg-4 form-control-label text-center" style="padding-left:88px;">Vendedor:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:-33px;">
                                                <input type="text" class="form-control-sm" style="min-width:100px" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group custom-two" style="width:100%;">
                                            <label class="col-lg-4 form-control-label" style="padding-left:52px;">Tabela Preço:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:-80px;">
                                                <input type="text" class="form-control-sm" style="min-width:100px" />
                                            </div>


                                            @*<label class="col-lg-4 form-control-label text-center" style="padding-left:88px;">Complemento P.Física:</label>*@
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:126px;">
                                                <button style="width:212px; height:24px; padding-top:2px" class="btn btn-info"><i style="margin-right:9px" class="fa fa-edit"></i>Complemento P.Física</button>
                                                @*<input type="text" class="form-control-sm" style="min-width:100px" />*@
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group custom-two" style="width:100%;">
                                            <label class="col-lg-4 form-control-label" style="padding-left:21px;">Situação Financeira:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:-80px;">
                                                <input type="text" class="form-control-sm" style="min-width:100px" />
                                            </div>


                                            <label class="col-lg-4 form-control-label text-center" style="padding-left:41px;margin-right:-160px">Limite De Créditos:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:126px;">
                                                <input type="text" class="form-control-sm" style="min-width:100px" />
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>


                        <div class="row" style="margin-top:10px">
                            <div class="col-lg-12">
                                <fieldset style="border:1px solid #ddd">
                                    <div class="row">
                                        <div class="form-group custom" style="width:100%;">
                                            <label class="col-lg-4 form-control-label" style="padding-left:54px">Rua | Avenida:</label>
                                            <div class="col-lg-9" style="padding:0; margin:0; margin-right:-69px; margin-left:-80px;">
                                                <input type="text" class="form-control-sm" style="min-width:100%" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        @*<div class="form-group custom-two" style="width:100%;">
                <label class="col-lg-4 form-control-label" style="padding-left:44px;">Nome Fantasia:</label>
                <div class="col-lg-9" style="padding:0; margin:0; margin-right:-69px; margin-left:-80px;">
                    <input type="text" class="form-control-sm" style="min-width:100%" />
                </div>
            </div>*@
                                        <div class="form-group custom-two" style="width:100%;">
                                            <label class="col-lg-3 form-control-label" style="padding-left:83px;">Número:</label>
                                            <div class="col-lg-1" style="padding:0; margin:0; margin-right:-69px; margin-left:-26px;">
                                                <input type="text" class="form-control-sm" style="width:53px" />
                                            </div>

                                            <label class="col-lg-1 form-control-label text-center" style="padding-right:44px;margin-left:22px">Bairro:</label>
                                            <div class="col-lg-7" style="padding:0; margin:0; margin-right:-69px; margin-left:0;">
                                                <input type="text" class="form-control-sm" style="min-width:100%" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group custom-two" style="width:100%;">
                                            <label class="col-lg-4 form-control-label" style="padding-left:48px">Complemento:</label>
                                            <div class="col-lg-9" style="padding:0; margin:0; margin-right:-69px; margin-left:-80px;">
                                                <input type="text" class="form-control-sm" style="min-width:100%" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group custom-two" style="width:100%;">
                                            <label class="col-lg-4 form-control-label" style="padding-left:84px;">Região:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:-80px;">
                                                <select class="form-control-sm" style="height: 20px;padding: 0;width: 156px">
                                                    <option>01</option>
                                                    <option>02</option>
                                                </select>
                                            </div>

                                            <label class="col-lg-4 form-control-label text-center" style="padding-left:122px;">Zona:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:-33px;">
                                                <select class="form-control-sm" style="height: 20px;padding: 0;width: 156px">
                                                    <option>01</option>
                                                    <option>02</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group custom-two" style="width:100%;">
                                            <label class="col-lg-4 form-control-label" style="padding-left:71px;">Município:</label>
                                            <div class="col-lg-4" style="padding:0; margin:0; margin-right:-69px; margin-left:-80px;">
                                                <input type="text" class="form-control-sm" style="width:218px" />
                                            </div>

                                            <label class="col-lg-1 form-control-label text-center" style="margin-left:67px;">Cód:</label>
                                            <div class="col-lg-1" style="padding:0; margin:0; margin-right:-69px; margin-left:-10px;">
                                                <input type="text" class="form-control-sm" style="width:79px" />
                                            </div>

                                            <label class="col-lg-1 form-control-label text-center" style="margin-left:63px;">UF:</label>
                                            <div class="col-lg-1" style="padding:0; margin:0; margin-right:-69px; margin-left:-10px;">
                                                <input type="text" class="form-control-sm" style="width:36px" />
                                            </div>

                                            <label class="col-lg-1 form-control-label text-center" style="margin-left:21px;">Cód:</label>
                                            <div class="col-lg-1" style="padding:0; margin:0; margin-right:-69px; margin-left:-10px;">
                                                <input type="text" class="form-control-sm" style="width:36px" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group custom-two" style="width:100%;">
                                            <label class="col-lg-1 form-control-label" style="padding-left:74px; margin-left:24px">CEP:</label>
                                            <div class="col-lg-2" style="padding:0; margin:0; margin-right:-69px; margin-left:20px;">
                                                <input type="text" class="form-control-sm" style="width:86px" />
                                            </div>

                                            <label class="col-lg-1 form-control-label text-center" style="margin-left:67px;">País:</label>
                                            <div class="col-lg-1" style="padding:0; margin:0; margin-right:83px; margin-left:-10px;">
                                                <input type="text" class="form-control-sm" style="width:185px" />
                                            </div>

                                            <label class="col-lg-2 form-control-label text-center" style="margin-left:63px;">Cód Pais:</label>
                                            <div class="col-lg-1" style="padding:0; margin:0; margin-right:-69px; margin-left:-10px;">
                                                <input type="text" class="form-control-sm" style="width: 46px;margin-left: -10px;" />
                                            </div>

                                        </div>
                                    </div>


                                </fieldset>
                            </div>
                        </div>
                    </div>

                    <!--Contatos-->
                    <div class="col-lg-5" style="background-color:#808080">
                        <h3>Mundo</h3>
                    </div>

                    <!--Botões-->
                    <div class="col-lg-1" style="background-color:#00ff21;">
                        <h4>Bot</h4>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="~/Template/vendors/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

css twitter-bootstrap
  • 1

    You are setting many attributes "wrong" for example, you are giving fixed margins for the inputs and some Abels end up being over some other component, because you put the margins and some other attributes that look good just in the size of Screen X that I assume is yours. Then you can improve it by reading here. Also recommend you this here and here. I believe it will be very useful not only now, but in work

  • 1

    No offense, but your form is one of the worst I’ve ever seen! You destroyed Bootstrap by putting this lot of style="" in the tags. Your main starting point is to delete all Tyles, only this will improve 90% your code.

  • No problem, just because I know it’s bad, I came to ask for help. I researched a lot before coming here, but I can’t understand some things, for example, when working with the class .col-md- or col-lg, or any of it, it gets complicated, because it’s either a bigger size than I need, or I can never get it to go along. or stay the size I need

1 answer

1

You just need to format your code better. Come on, I noticed that you have a fairly extensive form, in this case you can use different styles according to the inputs.

I will try to exemplify and explain the behavior of tags.

First the col

Using the col-Sm-* it will scale from the screen of small devices, positioning the items one underneath the other to larger devices where it will adjust to the page size.

If you want to migrate to Bootstrap 4 have a new feature that would be just the col. It will create equal columns in all screen sizes and automatically adapt to you.

Example:

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

I also noticed that you created a grid using the tags Row and col in almost the entire form, which is not necessary, in the first line for example, to show the items next to each other it was enough to use the form-inline.

Take the example:

<form class="form-inline" action="/action_page.php">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

This link has some step-by-step tutorials that can help you better understand Bootstrap https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

  • 1

    The class col does not exist in Bootstrap 3. And the way this form the responsiveness will do this with it http://prntscr.com/o3m7s2

  • 1

    @Geremias yes, I know. In my reply I leave a tip for the user to use Bootstrap 4, that already exists this tag. The form-inline is perfect for what he needs. Because it will align the items by default and automatically adjust on the smaller screens, as it points out that your form looks strange when reducing the screen, that would be the goal. The code is not wrong, just badly formatted. Just study a little bit the formatting of Bootstrap that finds the path.

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.