我有两个问题,
<div class="mt-2 mb-5 pl-4">
<div class="flex w-full">
<div class="flex-no-shrink w-1/5 bg-white border-sidebarborder border rounded shadow my-2 pt-3 px-2">
@yield('sidebarmenu')
</div>
<div class="bg-white m-2 border border-contentborder rounded shadow border-sidebarborder w-full">
@yield ('content')
</div>
</div>
</div>
我在这做错了什么?
谢谢。边栏的结构如下;
<ul class="sidebar-ul">
<label class="sidebarheader">Management </label>
<li class="sidebar-li sidebar-li:hover"> <a class="sidebar-a sidebar-a:hover"> Item </a> </li>
</ul>
因为我在整个网站上使用这个,我把它拿出来app.scss,风格如下;
.sidebarheader {
background-color: #d5e5ef;
@apply block py-2 mb-1 px-2 text-sm capitalize;
}
.sidebar-li {
@apply pb-1 px-3;
}
.sidebar-li:hover {
background-color: #f3f3f3;
}
.sidebar-a {
color:navy;
font-size:13px;
@apply no-underline;
}
.sidebar-a:hover {
color: #3f71b1;
@apply underline;
}
.sidebar-ul {
@apply list-reset w-full pb-6 ;
}
所以看起来你不能使用%-width类的flex-no-shrink,例如:
'1/2': '50%',
'1/3': '33.33333%',
'2/3': '66.66667%',
'1/4': '25%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.66667%',
'5/6': '83.33333%',
我建议坚持使用固定大小,或者添加自定义css类并使用calc()
对不起,我没有更好的消息,但使用百分比类将始终导致缩放,因为它是vw
的百分比