2013-06-11 3 views
0
  • Я строю сайт на основе span10 Bootstrap.
  • Внутри нижнего колонтитула находятся 3 divs все под друг друга, все span10.
  • Второй и третий дивизии являются отступом.
  • Я не знаю почему. Кто-то может помочь?

Смотрите сайт здесь - http://www.brainstormadvertising.co.uk/webDev/span indenting in bootstrap

Зеленая зона в сноске, где мы видим, первый абзац, протекающие

Эта сноска находится в пределах и в целом DIV с контейнером жидкости класса. Вот код сноски:

<footer class="row-fluid backgAll img-rounded"> 

    <div class="span10 topCorners"> 
     <img src="customImages/headerTop.png" alt="H2onics"> 
    </div> 

    <div class="span10 green">Footer content goes here</div> 

    <div class="span10 bottomCorners"> 
     <img src="customImages/footerBottom.png" alt="H2onics"> 
    </div> 

</footer> 

ответ

1

Попробуйте следующее

<footer class="backgAll img-rounded"> 
    <div class="row-fluid"> 
    <div class="span10 topCorners"> 
     <img src="customImages/headerTop.png" alt="H2onics"> 
    </div><!-- end span10 --> 
    </div><!-- end row-fluid --> 

    <div class="row-fluid"> 
    <div class="span10 green"> 
     Footer content goes here 
    </div><!-- end span10 --> 
    </div><!-- end row-fluid --> 

    <div class="row-fluid"> 
    <div class="span10 bottomCorners"> 
     <img src="customImages/footerBottom.png" alt="H2onics"> 
    </div><!-- end span10 --> 
    </div><!-- end row-fluid --> 

</footer> 

Обратите внимание, что я оборачивать все span10 дивы рядных жидкости дивы

Надеется, что это помогает!

+0

спасибо. Это сработало, и это вариант, который я рассмотрел. Но все еще кажется странным. Если они являются span10, они просто эквивалентны ширине: 100%, а не отступ, как это сделал сайт. Но спасибо вам все равно. – William

+0

@William Если вы посмотрите, как определяется сетка, контейнер определяет общую ширину страницы, с небольшим отступом слева и справа. У каждого .span div также есть пробел слева, чтобы разместить столбцы. Если бы это было все, там было бы двойное пространство слева от первого столбца, поэтому Bootstrap компенсирует добавлением отрицательного левого поля, чтобы немного потянуть первый столбец влево. Вот почему вам нужно было сделать это и выравнивать столбцы. –

+0

@William Я только заметил, что у вас есть сбой в блоке, где у вас 5 столбцов. Он появляется, когда вы сокращаете окно браузера. На данный момент вы вложили 5 div2 в span10. Подробнее о том, как это сделать, см. В разделе вложенности жидкости на странице http://twitter.github.io/bootstrap/scaffolding.html. Удачи! –