col-md-6 is not working in MVC

Navigation
1

I created a form using bootstrap.css in the site w3schools.com/bootstrap/tryit.asp with the following code: 

  <div class="container">
        <form role="form">
                    <fieldset>
                        <div class="row">
                                <div class="col-md-1 col-md-offset-1 no-padding-left">
                                <div class="form-group">
                                    <label>Código</label>
                                    <input type="text" name="email" id="email" value="" class="form-control" />
                                </div>
                            </div>
                            <div class="col-md-2 no-padding-left">
                                <div class="form-group">
                                    <label>CNPJ</label>
                                    <input type="text" name="email" id="email" value="" class="form-control" />
                                </div>
                            </div>
                            <div class="col-md-3 no-padding-left">
                                <div class="form-group">
                                    <label>Nome Comercial</label>
                                    <input type="text" name="phone" id="phone" value="" class="form-control" />
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-md-offset-1 no-padding-left">
                                <div class="form-group">
                                    <label>Razão Social</label>
                                    <input type="text" name="email" id="email" value="" class="form-control" />
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-5 col-md-offset-1 no-padding-left">
                                <div class="form-group">
                                    <label>Endereço</label>
                                    <input type="text" name="email" id="email" value="" class="form-control" />
                                </div>
                            </div>
                            <div class="col-md-1 no-padding-left">
                                <div class="form-group">
                                    <label>Numero</label>
                                    <input type="text" name="email" id="email" value="" class="form-control" />
                                </div>
                            </div>
                        </div>


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

There it works correctly and the form is as I imagined.

ButthenIcopiedthiscodeexactlyasitis(Ihavenotyetgottenthemergepartwiththe%codeofRAZOR)anditdoesnotrenderlegal,buttheSOCIALRACEline,whichshouldoccupytheentirewidthoftheFORM,doesnothappenindependentlyifIput6,7,8...or12.

Theformlookslikethis:

What is keeping it from the correct width?

Thank you

    
asked by anonymous 09.03.2016 / 19:41

2 answers

1

The classic ASP.NET MVC project sets some undesirable things, like this one.

Open the file Content/Site.css and comment or remove the following: 

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Or, delete the file. Just be sure to remove it from BundleConfig.cs .

    
09.03.2016 / 22:48
0

Simple, the boostrap grid has classes for desktops and mixed displays but the feature used to identify the media is width, its display is outside the standard sizes of a desktop so the grid selectors do not work. >

Querying the boostrap documentation at: link you can read more about this type of problem but to solve this bug just replace the col-md-#numero# by col-xs-#numero# see my example: 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-xs-offset-1 no-padding-left">
      <div class="form-group">
        <label>Razão Social</label>
        <input type="text" name="email" id="email" value="" class="form-control" />
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-5 col-xs-offset-1 no-padding-left">
      <div class="form-group">
        <label>Endereço</label>
        <input type="text" name="email" id="email" value="" class="form-control" />
      </div>
    </div>
    <div class="col-xs-1 no-padding-left">
      <div class="form-group">
        <label>Numero</label>
        <input type="text" name="email" id="email" value="" class="form-control" />
      </div>
    </div>
  </div>
</div>
    
09.03.2016 / 19:57
How can I persist data using ArrayList? Web Helper Chart does not appear in the server application