Position:relative в сетке bootstrap?

Question

[Ива]

При создании кругового меню столкнулся с проблемой того что контейнер для меню со свойством position: relative; при уменьшении экрана выходит за границы области для него предназначенной(находится все это в системе сеток bootstrap3).Т.е. существует три колонки, меню расположено по середине и при уменьшении экрана центральный блок с меню просто наезжает на правую колонку. Подскажите пожалуйста, как это предотвратить?

ширина и высота заданы в vmin так как требуется соблюсти пропорции квадрата.
пример кода:codepen.io/Fess/pen/adOgRN

Comments

[Сергей Вирченко]

ширина и высота чего? не совсем понятно... можешь вылить на codepen например?

[Ива]

Сергей Вирченко: вот пример кода;codepen.io/Fess/pen/adOgRN

Answer 1

[Михаил Вихрян]

Примерно так:

<div class="row">
                <div class="col-sm-12 col-md-12 style="padding:0">
                    <nav class="circle-menu">
                        <div class="center"></div>
                        <ul>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                    </nav>
                </div> 
            </div>

"Наезд" происходит из-за блоков col-sm-1 и padding-a у блока, в который впихнули nav

Comments

[Ива]

это не поможет, все равно при уменьшении окна просмотра, но не доходя до col-xs центральный блок наезжает на правый