Bootstrap - How to increase the input column size?

1

Follow the code:

On the index page:

<!-- Modal -->
<div class="modal" id="minhaModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div id="conteudoModal"></div>
      </div>
    </div>
  </div>
</div>

In _PartialView:

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title">Criar</h4>
</div>

<div class="modal-body">
  <div class="form-horizontal">
    <div class="form-group">
      <div class="col-xs-12">
        <div class="input-group">
          <input type="text" class="form-control col-xs-12" placeholder="Username">
          <span class="input-group-addon btn btn-default">?</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal-footer">
  <input type="submit" class="btn btn-success" value="Criar" />
  <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
</div>

I can change the size of: col-xs-1 to 4. I can not change to col-xs-12.

Here is the image:

Intheimageabove,wherethereistheredline,theinputshouldcomprisethewholeredline.

Ifollowedtheexampleofthissite: link

I have tried to change the size of the column by width and nothing works.

Any solution?

    
asked by anonymous 06.02.2017 / 19:09

1 answer

4

If you started the project in Asp.Net MVC5, visual studio creates a file called Site.css . It stays at ~/Content/Site.css

In this file, you have the following line:

input,
select,
textarea {
    max-width: 280px;
}

This css is saying that the elements input , select and textarea will have the maximum size of 200px.

Change this size, comment / remove this part or change css manually. Either of these options will solve your problem.

    
06.02.2017 / 19:26