дочерние элементы во вложенной сетке, игнорирующие родительское заполнение

#html #css #getuikit

#HTML #css #getuikit

Вопрос:

вот мой код

         <div class="uk-container">

            <div class="uk-child-width-1-3@m uk-child-width-1-1@s" uk-grid>

                <div class=" global-border outer-grid">
                    <div class="  main-color" uk-grid>
                        <div class="uk-width-2-5 coine-card bg-yellow  inner-grid" >
                        </div>
                        <div class="uk-width-1-5 bg-yellow-lm  timer coine-card   inner-grid">
                        </div>
                        <div class="uk-width-2-5 coine-card bg-yellow  inner-grid" >
                        </div>
                    </div>
                </div>

                <div class=" global-border outer-grid">
                    <div class="  main-color" uk-grid>
                        <div class="uk-width-2-5 coine-card bg-yellow inner-grid " >
                        </div>
                        <div class="uk-width-1-5 bg-yellow-lm timer coine-card  inner-grid ">
                        </div>
                        <div class="uk-width-2-5 coine-card bg-yellow  inner-grid" >
                        </div>
                    </div>
                </div>


                <div class="global-border outer-grid">
                    <div class="bg-yellow" style="height: 200px">
                        some stuff
                    </div>
                </div>

            </div>

        </div>
  

у меня есть внешняя сетка с 3 столбцами (у них есть класс внешней сетки), а внутри 2 из этих столбцов у меня есть еще 3 столбца uk-grid (у них есть класс внутренней сетки), за исключением одного из них, в котором есть только div с some stuff в нем!
вот результат

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

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

почему это происходит и как я могу это решить?

вот jsfiddle

http://jsfiddle.net/pjgr8kb2/

Ответ №1:

Это:

 .uk-grid {
 margin-left: -30px;
}
  

Удалите это, и вы должны получить желаемый результат!

ПРИМЕЧАНИЕ: я также заметил, что у вас было несколько ошибок форматирования в вашем HTML, например:

  <div class="  main-color" uk-grid>
  

Вероятно, вместо этого должно выглядеть так:

  <div class="main-color uk-grid">
  

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

1. спасибо, это не ошибки форматирования … именно так работает фреймворк uikit, и я предпочитаю не касаться фреймворка core css

2. Могли бы вы просто добавить пользовательский класс и переопределить фреймворк css там, где вам это нужно? ` .tableAdjustment{ margin-left: 0px !важно; }` @hretic