图像在小屏幕上的导航栏上移动

我创建了一个侧面导航栏并在其旁边有图像。这是在bootstrap中创建的，因为我们使网站响应，但导航栏和图像已设置宽度。当它在22英寸的屏幕上时，图像被正确放置，但是当我将它移动到更小的屏幕时，图像覆盖了一些导航栏。这可能是因为列影响宽度？图像在小屏幕上的导航栏上移动

因为我不知道问题出在哪里，所以我把它放在了codepen上。 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; 
}

来源

2016-10-28 Naomi

对较小的（屏幕分辨率）设备使用col-sm-1和col-xs-1。 –

请勿使用'position：fixed' – TryingToImprove

如果您的屏幕变小，则您的元素将变为全角。你的'nav'仍然有'position：fixed'。所以你的导航消失了。 – Huelfe

相关的代码，因为你正在使用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

来源

2016-10-28 08:54:33 TryingToImprove

我无法打开codepen – Naomi

对不起，现在应该工作.. – TryingToImprove

我看到你的CSS样式，以固定的导航栏：

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

只需添加style="margin-left:160px"到图像的容器

这样的：<div class="col-md-11" style="margin-left:160px">解决您的图像边距。

来源

2016-10-28 08:54:45

这似乎是一个黑客，因为那样的话，为什么用'COL-MD-*'.. – TryingToImprove

@TryingToImprove我只是跟着她要求先生。 :) –

图像在小屏幕上的导航栏上移动

回答

相关问题