twitter-bootstrap – is there any way to change the input width and continue auto resizable in Bootstrap?

Question:

<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 it like this my input is not auto resizable …

can I just go through the numbering col-xs-*? Is there no way to move the input width and remain auto resizable (fluid)?

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

Answer:

The problem with your example is the CSS application priority.

Explaining:

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

  1. Rules with !important ;
  2. Rules within the style attribute of an HTML element;
  3. Rules with one or more selectors per id ;
  4. Rules with one or more selectors per class , atributo or pseudo-seletor ;
  5. Rules with one or more selectors per element;
  6. 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 at the highest priority wins.

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

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

  1. Rules inside the style element in the head of the HTML;
  2. Rules inside a file imported by an @import inside style ;
  3. Rules within a file imported by a link element;
  4. Rules within a file imported by an @import within a file imported by a link element;
  5. Rules within a file attached by an end user;

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

  1. Default browser CSS rules.

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

I'm mentioning CSS as feminine because of the translation of Creative StyleSheets which means Cascading Style Sheets .

Going straight to the problem

Since you've defined something inside the element's style attribute, it overrides the width attribute of any Bootstrap class, unless the width by Bootstrap has the !important attached, which I don't think will happen.

A suggestion to solve the problem would be to change the width measure to % . There it maintains the self-adjusting capability.

Post Views: 1
Scroll to Top