Question

我创建了一个侧面导航栏，旁边有一个图像。这是在引导程序中进行的，因为我们正在使站点响应，但导航栏和图像已设置宽度。当它在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;
}

Answer 1

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

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

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

即可

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

Answer 2

由于您使用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

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

2 个答案: