Попытка создать вспомогательный div со строкой класса одинаковой ширины со строкой контейнера

#jquery #css #twitter-bootstrap

#jquery #css #twitter-bootstrap

Вопрос:

У меня есть контейнер с автоматической шириной, и у меня есть div class=row, помещенный в контейнер div, но моя проблема в том, что div с class row не имеет той же ширины, что и div с class container. Это моя попытка

 <div style="background-color:#98FB98; height:350px; width:auto;" class="row">
        <div style="padding:15px;" class="col-md-6">
            Contents here
        </div>
        <div class="col-md-6">
            Logo here
        </div>
    </div>  
 

Вот планка, которую я сделал.

 http://plnkr.co/edit/griWXBoxozvPIMlf38RB?p=preview 
 

Пожалуйста, как я могу сделать так, чтобы теги div и hr имели одинаковую ширину с div класса container

Ответ №1:

Первый: удалите отступы .container , у вас есть отступы — прямо здесь. Второй: вы используете div с class .col-lg-12 — у него по умолчанию есть левые и правые отступы, поэтому он должен быть внутри какого .row -либо элемента, если вы не хотите иметь пробелы с левой и правой стороны 😉

Вам следует подробнее прочитать о bootstrap grid, вы используете его неправильно, это зеленое поле должно быть внутри некоторого .row div, а не внутри .col-lg-12 класса, который он не должен .row иметь.

Ответ №2:

Удалите margin-left: 250 пикселей и margin-right: 250 пикселей из класса контейнера, и он будет работать нормально

 .container {
      width: auto;
      height: 500px;
      max-height: 500px !important;
      padding-left: 0px;
      position: relative;
    }
 

Ссылка на фиксированный плунжер: http://plnkr.co/edit/KfxAnGfaeLOIOWvqxWkY?p=preview

Комментарии:

1. Не вижу никакой разницы. Div с шириной зеленого фона отличается от родительского div

2. Вы проверили ссылку?

3. Да, я это сделал. Ширина div с зеленым фоном не совпадает с шириной div с черным фоном