2013-12-17 2 views
0

Мне любопытно, и я искал везде. Я пытаюсь создать три столбца, где левый и правый столбцы являются липкими, а центральный столбец не является липким. Я попытался добавить data-spy = "affix" в свой код и даже установить смещение, я могу заставить левый столбец стать липким, но правый столбец при добавлении dataspy появляется вложенным в левом столбце.Исправлена ​​компоновка макета колонок 3

код ниже:

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="well span2"><?="Left Column";?></div> 
     <div class="well span8"><?="Center Column";?></div> 
     <div class="well span2"><?="Right Column";?></div> 
    </div> 
</div> 

Кроме того, встроенный код PHP будет содержать некоторые PHP скрипты позже, если вам интересно, почему это выглядит смешно ...

Редактировать

Css код

.stick_r { 
    position:fixed; 
    right:10px; 
} 
.stick_l { 
    position:fixed; 
    left:10px; 
} 

Код HTML

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="well span2 stick_l">Left Column</div> 
     <div class="well span8">Center Column</div> 
     <div class="well span2 stick_r">Right Column</div> 
    </div> 
</div> 

Похоже, что центральная колонка находится под центральной колонкой. При смещении он выглядит далеко вправо.

enter image description here

Вместо

enter image description here

+0

Я почти неправильно напечатал, потому что не понял ваш вопрос. Исправлен не обязательно правильный термин, но «липкий». Я хочу, чтобы они оставались на экране, как фиксированный навигатор, и фиксированный нижний колонтитул ... т. Е. Я хочу липких боковых панелей. –

ответ

1

Я нашел ответ на

http://bootply.com/101100

<div class="sidebar-nav-fixed pull-right affix"> 

Вместо:

<div class="well span2"> 

для каждой боковой панели.

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