画像が小さい画面でナビバーを移動する

Question

サイドナビゲーションバーを作成し、その横に画像があります。これはブートストラップで行われます。なぜなら私たちはサイトを応答させていますが、navbarとimageは幅を設定しているからです。それが22インチの画面上にあるとき、画像は正しく配置されますが、それを小さな画面に移動すると、画像がナビバーの一部を覆います。列が幅に影響を及ぼすため、これは可能でしょうか？

私はどこに問題があるのか​​わからないので、私はそれをコードブックに入れました。 http://codepen.io/naomilea/pen/vXwdEO

あなたは、ブートストラップグリッドシステムを使用することができませんposition: fixedを使用しているので、これは問題に関連するコード

<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

です。

グリッドを削除してこの問題を解決し、コンテンツを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スタイルは、ナビゲーションバーに固定するために見て：あなたの問題を解決するために<div class="col-md-11" style="margin-left:160px">：

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

ただ、このようなあなたのイメージ

のコンテナにstyle="margin-left:160px"を追加します画像マージン。