Изображение перемещается по навигационной панели на меньшем экране

Question

Я создал боковой навигатор и имею изображение рядом с ним. Это делается в бутстрапе, поскольку мы делаем сайт отзывчивым, но навигационная панель и изображение имеют ширину. Когда он находится на экране размером 22 дюйма, изображение помещается правильно, но когда я перемещаю его на меньший экран, изображение покрывает часть навигационной панели. Может ли это быть потому, что столбцы влияют на ширину?

Поскольку я понятия не имею, где проблема, я поставил ее на код. http://codepen.io/naomilea/pen/vXwdEO

Это соответствующий код для выдачи

<div class="container-fluid" id="frontpage"> 
    <div class="row"> 
     <div class="col-md-1"> 
      <nav class="navbar navbar-default navbar-fixed-side"> 
       <div> 
        <span class="glyphicon glyphicon-star-empty navbarTitle"></span> 
        <h1 class="navbarTitle">BRHUB</h1> 
        <div class="navbarSplit"></div> 
       </div> 
       <div class="header"> 
        <span class="glyphicon glyphicon-list-alt navglyph"></span> 
        <h2>MAIN NEWS</h2> 
        <div class="navbarSplit"></div> 
       </div> 
       <div class="header"> 
        <span class="glyphicon glyphicon-phone navglyph"></span> 
        <h2>NOW TRENDING</h2> 
        <div class="navbarSplit"></div> 
       </div> 
       <div class="header"> 
        <span class="glyphicon glyphicon-list navglyph"></span> 
        <h2>CATEGORIES</h2> 
        <div class="navbarSplit"></div> 
       </div> 
       <div class="header"> 
        <span class="glyphicon glyphicon-pencil navglyph"></span> 
        <h2>REGISTER/SIGN IN</h2> 
        <div class="navbarSplit"></div> 
       </div> 
       <div class="header"> 
        <span class="glyphicon glyphicon-cog navglyph"></span> 
        <h2>SETTINGS</h2> 
        <div class="navbarSplit"></div> 
       </div> 
       <div class="socialMedia"> 
        <img class="image" src="http://static.wixstatic.com/media/afd97e_1c5f5ad2a5994bf689307d48d931b320~mv2.png"> 
        <img class="image" src="https://cdn.ecommnet.uk/wp-content/themes/ecommnet/library/images/twitter-icon.png"> 
        <img class="image" src="http://vectorlogofree.com/wp-content/uploads/2014/01/25280-tumblr-letter-logo-icon-vector-icon-vector-eps.png"> 
       </div> 
      </nav> 
     </div> 
     <div class="col-md-11"> 
      <input type="search" class="searchBox"> 
      <img src="http://www.planwallpaper.com/static/images/518169-backgrounds.jpg" class="feauturedImg "> 
     </div> 
    </div> 
</div> 

CSS

.navbar-fixed-side { 
    width: 160px; 
    height: 100%; 
    background-color: #f8f9f9; 
    font-family: Bebas Neue; 
    text-align: center; 
    font-size: 20px; 
    position: fixed; 
    margin-right: 0px; 
    margin-left: 0px; 
    visibility: visable; 
    overflow-y: scroll; 
} 

.feauturedImg { 
    max-width: 1760px; 
    width: 100%; 
    max-height: 700px; 
    margin: 0px 0px 0px 0px; 

} 

.col-md-1 { 
    margin-left: 0px; 
    padding-right: 0px; 
    padding-left: 0px; 
} 

.col-md-11 { 
    padding-left: 0px; 
    padding-right: 0px; 
} 

Answer 1

Поскольку вы используете position: fixed вы не можете использовать загрузочную сетку-систему.

Вы могли бы исправить это, удалив сетку и обернув содержимое в div, которые расположены.

<nav class="navbar navbar-default navbar-fixed-side"> 
    ...nav content 
</nav> 
<div class="page-content"> 
    ...page content 
</div> 


.page-content { 
    margin-left: 160px; /* width of navigation */ 
} 

http://codepen.io/anon/pen/dpEdWo

Answer 2

Я видел ваш стиль CSS для фиксированной навигационной панели:

.navbar-fixed-side { 
    width: 160px; 
    ... 
} 

Просто добавьте style="margin-left:160px" в контейнер вашего изображения

как это: <div class="col-md-11" style="margin-left:160px">, чтобы исправить ваш край изображения.