Bootstrap 3-сторонняя компоновка боковой панели

Я новичок в bootstrap, Я проектирую панель администратора, есла DEMO.Bootstrap 3-сторонняя компоновка боковой панели

Я хочу, чтобы высота боковой панели равнялась зависимости от содержимого контента div. .i.e (цвет фона боковой панели будет серым).

Html Markup: (также хотел бы знать, была ли моя HTML структура собственно)

<!-- Headder row --> 
    <div class="row"> 
     <div class="navbar"> ..... </div> 
    </div> 

<!-- Content row --> 
    <div class="row"> 
     <!-- SIDEBAR Open --> 
     <div id="sidebar-left" class="col-2 col-lg-2"> 
      .... 
     </div> 
    <!-- right content box --> 
    <div id="content-right" class="col-lg-10 container" > 
     ...... 
    </div 
    </div> 


<!-- Footer row --> 
    <div class="row"> 
     ...... 
    </div>

Ожидаемый результат: enter image description here

источник

2013-08-06 Satinder singh

Любой удачи с этим для начальной загрузки 3? в настоящее время изучает реализацию чего-то в этом направлении. – backdesk

попробовать этот

http://jsfiddle.net/BM65D/

body{ 
    margin:0; 
    padding:0; 
} 
.header{ 
    background-color:#00A2E8; 
    height:50px; 
    position:fixed; 
    top:0; 
    width:100%; 
} 
.footer{ 
    background-color:gray; 
    height:50px; 
    position:fixed; 
    bottom:0; 
    width:100%; 
} 
.left{ 
    height:400px; 
    background-color:#C3C3C3; 
    width:200px; 
    position:fixed; 
    top:50px; 
} 
.right{ 
    left:200px; 
    width:100%; 
    position:absolute; 
}

источник

2013-08-06 10:42:45 falguni

спасибо за ответ, но здесь вы установили высоту левого бара, а также без использования бутстрапа ?. Мне нужна колонка справа, столбец слева –

Постарайтесь, чтобы получить правильную высоту контейнера и присвоить ему его левой боковой навигационной панели, как показано ниже:

$(document).ready(function(){ 
    var s = $(".container").outerHeight(true); 
    s+= "px"; 
    //alert("height" + s); 
    $("#sidebar-left").css("height", s); 
    $("#sidebar-left").css("background-color", "grey"); 


});

источник

2013-08-06 10:43:50 web2008

Спасибо за попытку, но это их каким-либо другим способом, не используя JQuery вместо вычисления hieght используемых классов загрузки bootstrap. –

Я думаю, вы можете сделать это через CSS только тогда, когда высоты левого содержимого и правая часть содержимого фиксирована и статична. В противном случае следует использовать только JQuery. – web2008

Попробуйте это:

class="col-lg-2 col-sm-1"

источник

2013-09-12 14:01:37 Fyb3roptik

Попробуйте деформировать всю область содержимого в . контейнер. Видел это в старых документах под Fluid layout

источник

2013-09-12 14:59:41 ashwinm

имеют тег bootstrap 3, ссылка, которую вы указали, - это версия 2.3 –

Вы можете сделать это с помощью display:table-cell собственности

Я создал bootply демо =>http://bootply.com/100790

шагов:

Добавить другой класс в обертку, как. mainwrap и в CSS

.mainwrap { 
display:table; 
}

Добавить CSS на боковой панели слева и справа ent right

.sidebar-left { 
    display:table-cell; 
    float:none; 
} 

.content-right { 
display:table-cell; 
float:none; 
}

Я удалил min-height из содержимого справа, так как таблица не будет работать с ним. Также изменено float на none. потому что вы больше не нуждаетесь в этом.

Рабочих Демо: http://bootply.com/100790

Надеется, что это помогает

источник

2013-12-16 12:49:31

Bootstrap 3-сторонняя компоновка боковой панели

ответ

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