Question

我正在尝试复制基于主题https://themes.muffingroup.com/be/restaurant5/的页面的基本结构。

我尝试使用引导程序行和列，这些引导程序行和列似乎已造成了自己的问题，当尝试使用自定义CSS的Bootstrap进行引导时，它不作为主题。

在当前情况下，主要内容占100％，侧面菜单约为250px，由于侧面导航具有固定位置，主要内容区域占屏幕的100％，因此我希望主要内容占据剩余空间内容区域-侧面导航

我可以使用.side-content {width:calc(100% - 250px) !important}，但我很好奇他们如何处理示例主题，因为我无法使用calc函数

body{font-family: 'Open Sans', sans-serif;}
.side-content{background-color:red; withd:100%; float:left;
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	overflow:hidden;
	background-color: #ccc;
}
.side-nav {
	text-align:center;
	background-color: #FCFCFC;
	position: fixed;
	width: 250px;
	height: 100%;
	top: 0;
	right:0;
	z-index: 9002;
	-webkit-box-shadow: 2px 0 4px 2px rgba(0,0,0,.15);
	box-shadow: 2px 0 4px 2px rgba(0,0,0,.15);

}
.img-logo {
	margin-top:50px;
	vertical-align: middle;
	max-height: 100%;
	width:100%;
	max-width:150px;
}
.nav-menu{ 
list-style: none outside;
padding-top:30px;
margin-top:30px;
padding-left:0px;
}
.nav-menu > li {
	
	margin: 0;
	z-index: 203;
	display: block;
	float: left;
		width: 100%;
	float: none;
	position: relative;
	font-size:15px;
	font-weight:600;
	text-transform:uppercase;
	padding:5px 15px;
}

.main-c{ background:yellow;}

.sone{position:relative;width:100%; height:100%; background:blue;}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> 
	<link rel="stylesheet"  href="assets/css/main.css">
    <title>Page Title HERE!</title>
  </head>
  <body>

		<nav class="side-nav">
			<img class="img-logo" src="https://themes.muffingroup.com/be/restaurant5/wp-content/uploads/2019/12/restaurant5.png"/>
			<ul class="nav-menu">
				<li>Home</li>
				<li>Abouts Us</li>
				<li>Our Menu</li>
				<li>Special Offers</li>
				<li>Testimonials</li>
				<li>Gallery</li>
			</ul>
		</nav>
		<div class="side-content">
			<div class="sone"> SECTION ONE
			<p> this is intro area </p></div>
			<div class="stwo">SECTION TWO - About us </div>
			<div class="sthree">SECTION THREE - Our menu</div>
		</div>

   
	
	
	
	
	
	

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

内容区域占屏幕宽度的100％

0 个答案: