is there any way to tweak the width of the input and continue auto resizable in Bootstrap?

Navigation
3
<div class="col-lg-6" >
    <input type="text" class="form-control" style="width: 900px;">
</div>

ps. I just put a big value in width to test ... If I do this, my input does not get auto resizable ...

Can I just move by the col-xs- * numbering? Is not there a way to tweak the input width and continue auto resizable (fluid)?

In other words, can you only use Bootstrap's default functionality?

    
asked by anonymous 06.03.2015 / 06:43

1 answer

1

The problem with your example is in the CSS application priority.

Explaining:

There are priorities for applying style rules in CSS, they are as follows, from highest to lowest priority:

  • Rules with !important ;
  • Rules within attribute style of an element HTML ;
  • Rules with one or more selectors by id ;
  • Rules with one or more selectors by class , atributo or pseudo-seletor ;
  • Rules with one or more selectors per element;
  • Rules with universal selector.

    • These 6 priorities are applied when the rules are in the same file. If two rules of the same priority conflict, the one with the highest number of selectors wins the highest priority.

    When it comes to different files, the priorities of the files are as follows, from highest to lowest priority:

    Obs : From item 2, it refers to files other than the HTML page itself.

  • Rules within element style in head of HTML;
  • Rules inside a file imported by @import within style ;
  • Rules inside a file imported by an element link ;
  • Rules inside a file imported by a @import into a file imported by a link element;
  • Rules inside an attached file by an end user;

    • Obs : If the rules are with !important they have the highest priority.

  • Default CSS rules for browser .

    • Source="Pro CSS and HTML Design Patterns" by Michael Bowers.

      

    I'm mentioning CSS as a female because of the translation of Creative StyleSheets which stands for Cascading Style Sheets .

    Going straight to the problem

    Since you have defined something within the style attribute of the element, it overwrites the width attribute of any class of Bootstrap , unless width through Bootstrap has !important together, something that I do not believe it happens.

    One suggestion to solve the problem would be to change the measure from width to % . There it maintains the self-adjusting ability.

        
    06.03.2015 / 13:49
    Load data while scrolling the page with jQuery Query problems in XPath