2016-05-31 3 views
0

Я впервые использую bootstrap (версия 3.3.6) для создания своего сайта. Прочитал документы и начал код. Исключая <link> «s ниже кода является структура моего сайта:Как избавиться от отступов или маржинга из столбцов начальной загрузки

<body> 
<div class="container"> 
    <div class="row"> 
     <div class="col-sm-2 col-md-2 col-lg-2 col-lg-pull-1"> 
      <div class="loader"> 
       <div class="loader-bg"> 
        ... 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-10 col-md-10 col-lg-10 col-lg-push-1"> 
      <div class="black-box"> 
       <p class="info-message">Coming <span>VERY</span> soon!</p> 
       <p class="text-message">Until then, my contacts:</p> 
       ... 
      </div> 
     </div> 
    </div> 
</div> 

Использование толчка и тянуть классов я думал, что я был удален отступами для столбцов. Установка основной DIV с «класс =„контейнер“» У меня есть результат:

layout with class=container

Изменение к «класса =„контейнер-жидкость“» поведение остается странным. Примечание форма перекрывающейся страница: layout with class=container-fluid

То, что я хочу в моих результатах: круг и прямоугольник (оба дивы) остается выровнен по краям страницы (левая и правая) без заполнения или Маржинальные. Следующие документы до сих пор не работают. Что такое поведение?

ответ

1

по умолчанию col-* имеют padding так что вам просто нужно сбросить их

[class^="col"] { 
 
    padding: 0 
 
} 
 
[class$="-2"] { 
 
    background: orange 
 
} 
 
[class$="-10"] { 
 
    background: grey 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
 
     <div class="loader"> 
 
     <div class="loader-bg"> 
 
      ... 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10"> 
 
     <div class="black-box"> 
 
     <p class="info-message">Coming <span>VERY</span> soon!</p> 
 
     <p class="text-message">Until then, my contacts:</p> 
 
     ... 
 
     </div> 
 
    </div> 
 
    </div>

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