twitter-bootstrap徽标位置（台式机+移动设备）不同的位置

Question

thank you for your support. I have created one litte bootstrap page. I have only two little problems. The logo position on the desktop browser is different to the position on the mobile device (iphone).

i found out that if you change the css code "bootstrap.min.css" from the container-fluid - padding-left:15px; to padding-left:0px; the logo will be at the correct position on the desktop browser but on the wrong possition on the mobile device.

sample image

do you have any ideas to solve this problem?

Answer 1

The reason why you are experiencing this is because twitter bootstrap utilizes media queries . A media query essentially allows for a css class or id to have differing stylings for different screen widths.

To fix this you could go in and alter every media query in the minified code to fit your requirements. A better solution however, is to write your own css in a separate file that over rides the bootstrap .

Example

So here is a div with container fluid

<div class="container-fluid example">
 // your div content
</div>

Here is your css that will override the padding left.

.example {
  padding-left: 0px;
}