Удалите поля в столбцах span с помощью Bourbon Neat

Я начинаю использовать Bourbon Neat от Thoughtbot для адаптивных сеток. В целом, это довольно гладко, и мне это очень нравится, но я зациклился на одной маленькой проблеме.

Я пытаюсь заставить две колонки соприкасаться друг с другом без полей, но после попытки воспроизвести то, что у них есть, из их примеров, я не получаю того же результата.

Вот пример HTML:

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <p>
            This is the container
        </p>

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

Вот мой СКСС:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
 }

}

Что производит это:

введите здесь описание изображения

Но когда я пытаюсь заставить два столбца вкладываться/соприкасаться друг с другом, используя табличный метод, как показывает их пример, я получаю следующее:

SCSS:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row (table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display;
 }

}

Вывод:

введите здесь описание изображения

Если я иду по маршруту @include omega();, который работает, но тогда он не расширяет полную ширину последнего столбца:

SCSS:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    @include omega();
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include omega();
 }

}

Вывод:

введите здесь описание изображения

По сути, я мог бы просто опустить содержимое, находящееся в разделе контейнера, что дает результат, который я ищу. Но нужно ли для этого создавать пустой div?:

SCSS

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row(table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display
 }

}

HTML (содержимое в .container закомментировано):

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <!-- <p>
            This is the container
        </p> -->

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

Вывод: введите здесь описание изображения

В любом случае, я не знаю, какой "правильный" способ добиться этого. Документация на самом деле не является конкретной для объяснения того, как сделать так, чтобы два столбца вкладывались друг в друга. И то, что я пытался воспроизвести на их примере, не дало того же результата.

Если мне не нужно специально добавлять margin:0; в последний столбец.


html css sass bourbon neat
person ultraloveninja    schedule 23.07.2014    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Разве вы не перепутали свой p с содержимым «Это контейнер», так что он случайно используется в ячейке таблицы, но вы действительно хотите, чтобы он был над контейнером?

Поместите его выше .container, и он работает:

<section>
  <p>
    This is the main section.
  </p>
  <p>
    This is the container
  </p>
  <div class="container">
    <div class="col1">
      <p>
        This is the 1st column.
      </p>
    </div>

    <div class="col2">
      <p>
        This is the 2nd column.
      </p>
    </div>

  </div>
</section>

Сксс:

section {
  @include outer-container;
  text-align: center;
}

.container {
  @include fill-parent;
  @include row(table);

  .col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
  }
  .col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
  }
}

Выход:

рабочий пример

person Markus    schedule 12.01.2016

arrow_upward
0
arrow_downward

Вы можете установить span-columns() для каждого контейнера чуть меньше половины сетки каждый, а затем сдвинуть оставшееся значение, которое вы взяли из каждого контейнера, и shift() каждого контейнера с левой/правой сторон, например:

HTML:

<div id="wrapper">
    <div id="1"></div>
    <div id="2"></div>
</div>

сасс/sccs:

#wrapper
{
    #1
    {
        @include span-columns(5);
        @shift(1);
    }
    #2
    {
        @span-columns(5);
        @shift(-1);
    }


}

или, может быть, используйте миксин направления-контекста, чтобы переключить направление # 2...

сасс/sccs:

#wrapper
{
    #1
    {
        @include include span-columns(5);
        @include shift(1);
    }

        @include direction-context(right-to-left)
        {
            #2
            {
                @include span-columns(5);
                @include shift(-1);
            }
        }

}

Я не уверен, что я на 100% слежу за вашей проблемой, но если вы имеете в виду, что вы не можете заставить ПРАВУЮ сторону левого div коснуться ЛЕВОЙ стороны правого div прямо посередине, я считаю, что эти 2 решения будут работать, если вы поиграй с ними немного..

Дайте мне знать, как это работает~gl!

person HTMLangdon    schedule 23.01.2016
comment
Так решает ли этот ответ проблему, описанную в вопросе? Судя по вашему ответу, вы не понимаете заданного вопроса. - person cimmanon; 23.01.2016

arrow_upward
-2
arrow_downward

Вы можете сделать что-то вроде @include span-columns(6 из 12,block-collapse)

person Ray B    schedule 12.08.2014
comment
Это не работает. Последний элемент имеет переопределенную ширину, которая не соответствует ширине другого элемента. А общая ширина всех элементов одной строки превышает 100%. - person Michael; 18.08.2015