Пиксельная идеальная сетка

У меня нет большого опыта работы с twitter bootstrap, но с таким количеством хороших отзывов я решил использовать его для нового проекта, над которым я работаю.

Мне было интересно, как я могу получить идеальную сетку пикселей с этим новым бутстрапом шириной 1170 пикселей. как вы с этим работаете?

Сейчас я нахожусь на стадии проектирования, и я не хочу убедиться, что он будет работать нормально, когда я создам его с помощью начальной загрузки, единственная проблема, которую я обнаружил, заключается в том, что я не могу получить 12 четных столбцов с шириной 1170 пикселей.

Что я имею в виду под сеткой, не идеальной по пикселям, так это то, что столбцы не ровные, некоторые из них шире других.

Дайте мне знать, если у вас есть какие-либо предложения, чтобы обойти это.

Привет, Фалес


twitter-bootstrap grid pixel-perfect
person Thales Ribeiro    schedule 07.02.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Внимательно прочитайте документацию по начальной загрузке с самого начала. Bootstrap 3 — Сетка

Если вы читали, попробуйте

    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Untitled Document</title>
     <link href="assets/css/bootstrap.css" rel="stylesheet" media="screen" />
    </head>

<body>
  <div class="row"> 
    <div>
    <div class="col-md-1" style="background-color:red; height:45px;"></div>
    <div class="col-md-1" style="background-color:white; height:45px;"></div>
    <div class="col-md-1" style="background-color:red; height:45px;"></div>
    <div class="col-md-1" style="background-color:white; height:45px;"></div>
    <div class="col-md-1" style="background-color:red; height:45px;"></div>
    <div class="col-md-1" style="background-color:white; height:45px;"></div>
    <div class="col-md-1" style="background-color:red; height:45px;"></div>
    <div class="col-md-1" style="background-color:white; height:45px;"></div>
    <div class="col-md-1" style="background-color:red; height:45px;"></div>
    <div class="col-md-1" style="background-color:white; height:45px;"></div>
    <div class="col-md-1" style="background-color:red; height:45px;"></div>
    <div class="col-md-1" style="background-color:white; height:45px;"></div>
  </div>
</div>



  <script src="assets/js/jquery.js"></script>
  <script src="assets/js/bootstrap.js"></script>
  <script src="assets/js/dropdown.js"></script>
</body>
</html>

Если вам нужен идеальный пиксель из 12 столбцов, вам нужно определить div с классом «col-md-1» двенадцать раз, как указано выше.

Читайте с самого начала в Bootstrap 3

person Karthikeyan    schedule 07.02.2014

arrow_upward
0
arrow_downward

попробуйте использовать дизайны размера x2 в фотошопе, вы избавитесь от 0,5 пикселей и можете экспортировать ресурсы сетчатки, если это необходимо;) С ними достаточно легко работать и для тестировщиков.

person Andrew Arnautov    schedule 17.02.2016