2015-12-29 6 views
0

Есть несколько способов организовать сетку Bootstrap, например.Семантическая разметка с сеткой Bootstrap

<div id='footer'> 
    <div class='row'> 
     <div class='col-md-6 footer-left'> 

или

<div id='footer' class='row'> 
     <div class='col-md-6 footer-left'> 

или

<div id='footer'> 
    <div class='row'> 
     <div class='col-md-6'> 
      <div id='footer-left'> 

Какой из них более прост в обслуживании, предположим, что вы будете добавлять позиции CSS (маржинальные, обивка и т.д.) к footer и footer-left

+1

Этот вопрос является слишком широким, основанным на мнениях или требует обсуждения, и поэтому не относится к теме для переполнения стека. Если у вас есть конкретная, ответственная, проблема с программированием, предоставьте полную информацию. –

ответ

1

Я знаю, что некоторые классы Bootstrap, такие как контейнер, строка a nd col * * имеют некоторые предопределенные дополнения/поля, уже примененные к ним, что помогает вывести различные элементы и свернуть их в отзывчивом виде и так далее.

Поскольку CSS идентификатора имеет приоритет над CSS класса, если я правильно помню, то выполнение чего-то вроде вашего второго варианта может привести к некоторому нечетному поведению. В общем, я бы пошел на третий вариант, но в конечном итоге это сводится к предпочтению, и если вы чувствуете, что можете обойти любые причуды, которые могут возникнуть в других вариантах.

0
<div id='footer'> 
    <div class='row'> 
     <div class='col-md-6'> 
      <div id='footer-left'> 

Выше кода является лучшей иерархией для требуемого вывода. Если мы последуем за container -> row -> col-md-* -> user-defines-class, то он сделает код с полным реагированием и чистым бутстрапом div. эта иерархия поддерживает идеальный выход всех divs относительно margin, padding and center auto

0

Как выглядит ваш макет? У бутстрапа есть несколько решений для вас, и вы можете выбрать то, что вам нужно! в HTML5 лучшее решение для использования тега <footer> вместо <div class="footer">, 'class = "container"' имеет фиксированную ширину с paddings, 'class = "container-fluid"' имеет только paddings, class="row" имеет отрицательные поля, которые перекрывают положительные container paddings и т. д.

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