我正在尝试制作响应式网站。一切都很好,但我有一个问题。当我得到较小的窗口时,内容区域将落在导航栏的下方。
我想在左侧保留导航栏,在右侧保留内容。并排。我该如何解决?
这是我的密码
/*Navbar*/
div.navbar-inside a{
text-decoration: none;
font-family: "bocek-bold";
background-color: #f1f1f1;
display: block;
padding: 8.8px 14.2px;
text-decoration: none;
border-bottom: 1px solid #803104;;
color: #f75c03;
}
div.navbar-inside {
list-style-type: none;
display: table-row;
margin: 15px;
padding: 0;
width: 144px;
font-family: "bocek-bold";
font-size: 1.1em
}
div.navbar-inside a:hover {
background-color: #db995a;
color: #654236;
}
/*Content*/
.content-inside {
font-family: "bocek-bold";
font-size: 1.4em;
height: auto;
margin-left: 70px;
margin-top: 30px;
background-color: rgba(255, 255, 255, 0.5);
}
<!--Middle area. Navbar, content-->
<div class="row">
<!--Navbar-->
<div class="col-xs-0 col-md-2 navbar-inside" style="background-color:rgb(77, 58, 95);" >
<div class="col-xs-0 col-sm-4 col-lg-2 navbar-inside">
<a href="index.html">Anasayfa</a>
<a href="hakkimizda.html">Hakkımızda</a>
<a href="kadromuz.html">Kadromuz</a>
<a href="referanslar.html">Referanslar</a>
<a href="iletisim.html">İletişim</a>
</div>
</div>
<!--Content-->
<div class="col-xs-12 col-md-10 content-inside" style="background-color: rgb(43, 189, 226);">
<p>
CONTENTCONTENTCONTENTCONTENTCONTENT
</p>
</div>
</div>
答案 0 :(得分:1)
问题是您要在内容中添加左边距。这样,行内的空间(12列)将获得2列用于导航栏和10列+左边距内容。用导航栏计数时,该行中仅可容纳10列的空间(而不是10 +左边的空白),内容将无法容纳在那里并下降。