最小宽度的引导网格



我想实现2响应div,但一个最小宽度,但不能弄清楚如何:

这是这个想法的要点:

<div class="row">
<div class="col-lg-2"
style="min-width:227px"></div>
<div class="col-lg-10"
style="float:right"></div>
</div>

基本上,我想要一个2:10的比例之间的两个div,但上限左div最小为227px。当它低于这个位置时,我想折叠两个div(允许它们重叠),但让右边的div浮动到右边。

然而,无论我做了什么尝试,我都不能让右div浮动到右。它总是"下去"。当达到最小宽度时,使用左div。

有什么好主意吗?

你好兄弟,我是新来的,所以任何错误请忽略

你可以用自定义CSS代码实现这个功能,在这个代码中,你可以得到2:10的比例,当屏幕尺寸大于1362px时,当1362px的屏幕宽度达到时,第一个div的最小宽度即227px和第二个div相应调整,当屏幕尺寸达到768px时,两个div都内联显示

如果你有任何疑问,请告诉我

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
*{
margin:0px;
padding: 0px;
box-sizing: border-box;
}
.outer-section{
width: 100%;
}
.col_custom_2{
min-width: 227px;
width: 16.66%;
float: left;
}
.col_custom_10{
width: calc(100% - 16.66%);
float: right;
}
@media (max-width: 1363px) {
.col_custom_10{
width: calc(100% - 227px);
}
}
@media (max-width: 768px) {
.col_custom_2,.col_custom_10{
min-width: 100%;
}
}

</style>

<title>Document</title>
</head>
<body>

<section class="outer-section">
<div class="col_custom_2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quisquam, voluptatem quaerat ex. Aperiam maxime labore cumque, quidem cupiditate eum inventore dolorem deserunt perspiciatis consequuntur?</p>
</div>
<div class="col_custom_10">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe cum repellat dolor magnam at est veniam, ex rem odio necessitatibus molestias vel dolorum numquam voluptas, odit, nemo autem, porro alias. Expedita, voluptate repudiandae officiis corporis explicabo iusto vero saepe laborum possimus dolore temporibus quasi quas numquam quibusdam fugiat dolorem, deleniti?</p>
</div>
</section>
</body>
</html>

相关内容

  • 没有找到相关文章

最新更新