Is there any way to move the input width and continue auto resizable in Bootstrap?

Asked

Viewed 265 times

3

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

ps. just put a big value on width to test out... If I do it this way my input won’t stay auto resizable...

can I just keep going with the col-Xs-* numbering? There’s no way to move the width of the input and continue auto resizable (fluid)?

I mean, you can only use the features in default bootstrap?

twitter-bootstrap

  • With !important doesn’t work?

  • Have you tried rewriting col-lg-6 for example, but only by changing % of width? ex: .col-lg-6 {width: 100% !important;} Remembering that col-lg-6 is only a part of the bootstrap responsiveness set. Examples: http://getbootstrap.com/examples/grid/ Explanations: http://stackoverflow.com/questions/19865158/what-is-the-difference-among-col-lg-colmd-andcol-sm-in-twitter-bootstra

1 answer

1

The problem with your example is the CSS application priority.

Explaining:

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

  1. Rules with !important;
  2. Rules within the attribute style of a single element HTML;
  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 in the highest priority wins.

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

Obs: Starting from item 2, refers to different files to the HTML page itself.

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

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

  1. Standard CSS rules of browser.

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

I am mentioning CSS as feminine because of the translation of Creative StyleSheets which means Cascade Style Sheets.

Getting right to the problem

How you define something within the attribute style element, it overrides the width attribute of any class of the Bootstrap, unless the width for Bootstrap has the !important together, something I don’t believe occurs.

A suggestion to solve the problem would be to change the measure of width for %. Ai it maintains self-adjusting ability.

Browser other questions tagged twitter-bootstrap

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