Twitter bootstrap fixed layout issue

У меня возникла странная проблема с моими столбцами, использующими загрузку Twitter. Настройка тестовой страницы, которая должна вести себя как пример: http://twitter.github.io/bootstrap/examples/hero.html. Вот HTML:Twitter bootstrap fixed layout issue

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap.css" /> 
    <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-yii.css" /> 
    <link rel="stylesheet" type="text/css" href="/assets/24d7eb4f/css/bootstrap-responsive.min.css" /> 
    <script type="text/javascript" src="/assets/8b15478e/jquery.js"></script> 
    <script type="text/javascript" src="/assets/24d7eb4f/js/bootstrap.js"></script> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="span4" style="border: 1px solid red;"></div> 
      <div class="span4" style="border: 1px solid red;"></div> 
      <div class="span4" style="border: 1px solid red;"></div> 
     </div>    
    </div> 
</body>

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

Что мне здесь не хватает?

источник

2013-04-18 olemara

Примечание: Я использую загрузку Twitter как дополнение к Yii здесь. Однако не должно быть проблемой. – olemara

Border добавляет пиксели к ширине, поэтому span4 теперь увеличен до 302px (border-left: 1px + border-right: 1px) от 300px и, следовательно, переходит к следующей строке. См here

border: 1px solid red;

Вы можете дать фон вместо границы, чтобы проверить.

Проверить fiddle

источник

2013-04-18 09:34:18 anpsmn

Привет, спасибо за отзывы @anpsmn. Конечно, вы правы, что получаете дополнительные поля с границами. То, что меня бросило, это то, что я использую это внутри nav и tab, что вызывает тот же эффект, что и этот граничащий. Я прав? – olemara

Да, граница добавляет пиксели и заставит элемент перейти к следующей строке, если места недостаточно. – anpsmn

Применяя border ломает макет, добавив некоторую ширину вашего span с.

Натуральное решение для обработки «стилей столбцов» - это элементы .well.

HTML

<div class="row"> 
    <div class="span4"> 
     <div class="well well-with-my-style"> 
     </div> 
    </div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div>

CSS

.well-with-my-style { 
    border: 1px solid red; 
    background: none; 
    /* whatever... */ 
}

Таким образом, вы будете уважать родной макет и получить прибыль от .well элемента, но помните, что вы должны переопределить .well стили с вашей собственный (используя .well-with-my-style класс).

источник

2013-04-18 10:09:01 albertedevigo

Привет, спасибо за отзывы @simbirsk. Конечно, вы правы, что получаете дополнительные поля с границами. То, что меня бросило, это то, что я использую это внутри nav и tab, что вызывает тот же эффект, что и этот граничащий. Я прав? – olemara

Вкладки (слева или справа, я полагаю) не вызывают проблем, когда макет внутри каждой вкладки является текучим. Думаю, это другая проблема. – albertedevigo

Twitter bootstrap fixed layout issue

ответ

Смежные вопросы