html - 图像在较小屏幕上移动到导航栏上

Question

我创建了一个侧面导航栏，旁边有一张图片。这是在 Bootstrap 中完成的，因为我们正在使网站响应，但导航栏和图像已设置宽度。当它在 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

我看到你的 CSS 样式来修复导航栏:

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

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

像这样:<div class="col-md-11" style="margin-left:160px">修复图像边距。