我做了一个没有引导程序的菜单4.我正在查看工作的结果,我想这不是响应式设计。我想知道如何让左边的徽标和右边的菜单(约226px
)之间的空间从226变为0,而屏幕将会下降。
.menu {
max-width: 960px; }
.menu {
background-color: #e668b1; }
.menu .col-md-3 {
border: 1px solid red; }
.menuIcon {
border: 1px solid red; }
nav ul, nav ol {
margin: 0;
padding: 0;
list-style: none; }
.mainav li {
display: inline-block;
padding: 0; }
.mainav a {
font-size: 12px;
letter-spacing: 0.6px;
line-height: 10px;
padding: 16px 17px 14px 19px;
color: #232323;
font-family: "Montserrat", sans-serif;
font-weight: 300;
opacity: 0.5;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
transition: 0.5s; }
.mainav .nav_home {
margin-right: -13px; }
.mainav .nav_pages {
margin-right: -4px; }
.mainav .nav_elements {
margin-right: -3px; }
.mainav .nav_product {
margin-right: -11px; }
.mainav .nav_blog {
margin-right: -11px; }
.mainav .nav_work {
margin-right: 6px; }
.mainav .drop {
padding-right: 10px; }
.menuIcon {
margin: auto auto -4px 30px; }
.menuIcon .line1, .line2, .line3 {
width: 20px;
height: 2px;
background-color: #000;
margin: 3px 0; }
a.current_page {
padding-left: 0; }
.mainav li li {
width: 100%;
margin: 0; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="menu row align-items-center mx-auto d-flex justify-content-between">
<div class="col-md-3 px-0">
<img src="img/Block 1 - Header/logo.png" alt="logo">
</div>
<nav class="mainav col-md-9 d-flex justify-content-end px-0">
<ul>
<li><a class="active nav_home current_page" href="index.html">Home</a></li>
<li><a class="drop nav_pages" href="#">Pages <span class="arrow"></span></a>
</li>
<li><a class="drop nav_pages" href="#">Elements <span class="arrow"></span></a>
</li>
<li><a class="nav_product" href="#">Product</a></li>
<li><a class="nav_blog" href="#">Blog</a></li>
<li><a class="nav_work" href="#">Work</a></li>
<li><a class="nav_startAproject" href="#">Start a project</a></li>
<li class="menuIcon">
<div>
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</li>
</ul>
</nav>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
&#13;
答案 0 :(得分:0)
我认为最好的解决方案就是使用%对你的列进行工作,然后将你的主要div的宽度设置为100%。如果这是你的意思,我认为这是你问题的解决方案吗?
答案 1 :(得分:-1)
我不完全确定你在问什么,但我相信你所寻找的是一个媒体查询来改变不同分辨率的缩放。您可以找到媒体查询的文档here。