具有最小宽度的引导网格答案

【问题标题】：Bootstrap grid with min-width具有最小宽度的引导网格
【发布时间】：2021-09-07 22:33:15
【问题描述】：

我想实现 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>

基本上，我希望两个 div 之间的比例为 2:10，但将左侧 div 的最小限制为 227px。当它低于该值时，我想折叠两个 div（允许它们重叠）但使右侧 div 浮动到右侧。

但是，无论我尝试了什么，我都无法让正确的 div 向右浮动。一旦达到最小宽度，它总是“低于”左侧 div。

关于如何做到这一点的任何想法？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

你好兄弟，我是这个社区的新手，如有错误请忽略

您可以在此代码中使用自定义 CSS 代码实现此功能您可以在 1362px 屏幕宽度达到时屏幕尺寸大于 1362px 时获得 2:10 的比例，然后是第一个 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>

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。
这就是我现在拥有的，但是当达到最小宽度时， col-lg-10 div 进入 col-lg-2 div 的“下方”，并且机器人从左侧对齐这页纸。我对重叠很好，但如果可能的话，我希望 col-lg-10 从骑行侧对齐。