jquery - HTML CSS 响应式 Div Bootstrap-6ren

jquery - HTML CSS 响应式 Div Bootstrap

转载作者：太空宇宙更新时间：2023-11-04 01:54:28

我目前有一些 div 在台式机或平板电脑上显示效果很好:

但是，当我将它缩小到移动 View 时，它们看起来很糟糕并且没有正确地重新定位:

我真的希望它们能够自动调整，这样当它们在平板设备上时它们显示一行 3，而在移动设备上它们显示一行 2，如下所示:

这似乎正是 col-xs-6 在 bootstrap 中的作用，但是当我添加它时，它似乎不起作用。

这是 HTML:

<div id="surveys" class="surveys col-xs-12"><div>
    <div class="col-xs-12">
        <div class="row">
            <div class="col-xs-12" id="title">
                <h4 style="text-transform: uppercase;">Surveys</h4>
                <h5 class="sub-title">The Best Way to Get Free Coins</h5>  
            </div>
            <div id="surveys-list" class="col-xs-12"><div>
    <div id="surveys-list-container"><div class="survey-item">
    <div id="2697033" class="item survey">
        <span class="note new">&nbsp;Opened&nbsp;</span>
        <div id="reward-box" class="reward-box"><div>

    <p class="amount">
        <i class="fa fa-plus"></i>

        <span class="value">49</span>
        <span class="currency">reward points</span>
        <span class="hidden">+More</span>
    </p>
</div></div>
        <div id="loi-box" class="loi-box"><div class="loi">
    <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20">
    <span class="duration">10 min survey</span>
</div></div>
    </div>
</div><div class="survey-item">
    <div id="2697013" class="item survey">
        <span class="note new">&nbsp;Opened&nbsp;</span>
        <div id="reward-box" class="reward-box"><div>

    <p class="amount">
        <i class="fa fa-plus"></i>

        <span class="value">85</span>
        <span class="currency">reward points</span>
        <span class="hidden">+More</span>
    </p>
</div></div>
        <div id="loi-box" class="loi-box"><div class="loi">
    <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20">
    <span class="duration">20 min survey</span>
</div></div>
    </div>
</div><div class="survey-item">
    <div id="2697207" class="item survey">
        <span class="note new">&nbsp;Opened&nbsp;</span>
        <div id="reward-box" class="reward-box"><div>

    <p class="amount">
        <i class="fa fa-plus"></i>

        <span class="value">85</span>
        <span class="currency">reward points</span>
        <span class="hidden">+More</span>
    </p>
</div></div>
        <div id="loi-box" class="loi-box"><div class="loi">
    <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20">
    <span class="duration">18 min survey</span>
</div></div>
    </div>
</div><div class="survey-item">
    <div id="2697031" class="item survey">
        <span class="note new">&nbsp;Opened&nbsp;</span>
        <div id="reward-box" class="reward-box"><div>

    <p class="amount">
        <i class="fa fa-plus"></i>

        <span class="value">85</span>
        <span class="currency">reward points</span>
        <span class="hidden">+More</span>
    </p>
</div></div>
        <div id="loi-box" class="loi-box"><div class="loi">
    <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20">
    <span class="duration">10 min survey</span>
</div></div>
    </div>
</div><div class="survey-item">
    <div id="2697999" class="item survey">
        <span class="note new">&nbsp;Opened&nbsp;</span>
        <div id="reward-box" class="reward-box"><div>

    <p class="amount">
        <i class="fa fa-plus"></i>

        <span class="value">87</span>
        <span class="currency">reward points</span>
        <span class="hidden">+More</span>
    </p>
</div></div>
        <div id="loi-box" class="loi-box"><div class="loi">
    <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20">
    <span class="duration">18 min survey</span>
</div></div>
    </div>
</div><div class="survey-item">
    <div id="2697687" class="item survey">
        <span class="note new">&nbsp;Opened&nbsp;</span>
        <div id="reward-box" class="reward-box"><div>

    <p class="amount">
        <i class="fa fa-plus"></i>

        <span class="value">85</span>
        <span class="currency">reward points</span>
        <span class="hidden">+More</span>
    </p>
</div></div>
        <div id="loi-box" class="loi-box"><div class="loi">
    <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20">
    <span class="duration">10 min survey</span>
</div></div>
    </div>
</div></div>
</div></div>
        </div>
    </div>
</div></div>

还有 CSS:

#surveys h4 {
    font-family: Montserrat-Bold;
    letter-spacing: .1em;
    margin-top: 16px;
    margin-bottom: 8px;
}

#surveys h4 {
    text-transform: uppercase;
    color: #555555;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.1;
    font-family: Montserrat-Regular, Verdana, sans-serif;
}

#surveys .sub-title {
    margin-bottom: 16px;
    margin-top: 0px;
    color: #777777;
    font-size: 14px;
    font-family: inherit;
    font-weight: 800;
    line-height: 1.1;
    font-family: Montserrat-Regular, Verdana, sans-serif;
}

#surveys .survey-item {
    float: left;
    width: 19.2%;
    display: block;
    margin: 5px 0.8% 5px 0;
    border-radius: 7px 7px 6px 6px;
    border-width: 1px;
    border-style: solid;
    position: relative;
    cursor: pointer;
    background-color: #FFFFFF;
    border-color: #dddddd;
    -moz-box-shadow: 0 2px 0 0 #cccccc;
    -webkit-box-shadow: 0 2px 0 0 #cccccc;
    box-shadow: 0 2px 0 0 #cccccc;
    font-family: Montserrat-Regular, Verdana, sans-serif;
    height: 100%;
    overflow-y: visible;
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.42857;
    color: #333333;
    background-color: #fff;
}

#surveys .survey-item {
    float: left;
    width: 19.2%;
    display: inline-block;
    margin: 5px 0.8% 5px 0;
    border-radius: 7px 7px 6px 6px;
    border-width: 1px;
    border-style: solid;
    position: relative;
    cursor: pointer;
    background-color: #FFFFFF;
    border-color: #dddddd;
    -moz-box-shadow: 0 2px 0 0 #cccccc;
    -webkit-box-shadow: 0 2px 0 0 #cccccc;
    box-shadow: 0 2px 0 0 #cccccc;
}

#offers .note, #surveys .note {
    display: none;
    font-family: Montserrat-Bold, Verdana, sans-serif;
    font-weight: bold;
    font-size: 0.625em;
    position: absolute;
    right: -0.5em;
    line-height: 2;
    border-left-width: 10px;
    border-left-style: solid;
    border-right-width: 5px;
    border-right-style: solid;
    color: #139493;
    background-color: #a5e2e1;
    border-left-color: #a5e2e1;
    border-right-color: #a5e2e1;
    box-shadow: 0 1px 0 0 #dddddd;
    -moz-box-shadow: 0 1px 0 0 #dddddd;
    -webkit-box-shadow: 0 1px 0 0 #dddddd;
}

#surveys .reward-box {
    font-family: BebasNeue, Impact, sans-serif;
    font-weight: normal;
    font-size: 1.875em;
    /*padding: 10.2px;*/
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #17b4b3;
}

#surveys .reward-box .amount {
    color: #f6fcfc;
    position: relative;
    width: 100%;
    display: inline-block;
    letter-spacing: 0.0125em;
    white-space: nowrap;
    margin: 0 0 10px;
    margin-bottom: 0;

}

#surveys .reward-box .value {
    font-size: 2em;
    font-weight: bold;
    vertical-align: sub;
    margin: 3%;
    display: inline-block;
    padding-bottom: .5em;
}

#surveys .reward-box .currency {
    color: #d1f0f0;
    position: relative;
    /*width: 50%;*/
    vertical-align: middle;
    text-align: right;
    font-family: Montserrat-Bold, Verdana, sans-serif;
    font-weight: bold;
    font-size: 11px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 2.8em;
    white-space: normal;
}

#surveys .loi-box {
    font-family: Montserrat-Bold, Verdana, sans-serif;
    font-weight: bold;
    font-size: 0.75em;
    text-transform: capitalize;
    text-indent: -2em;
}

#surveys .loi-box .duration {
    vertical-align: middle;
    font-family: Montserrat-Bold, Verdana, sans-serif;
    font-weight: normal;
    font-size: 12px;
    padding: 8px 0;
    text-transform: capitalize;
    text-indent: -2em;
    color: #888888;
    line-height: 16.8px;
    letter-spacing: .01em;
}

#reward-box {
    padding: 0px;
}

#surveys .reward-box i {
    color: #4ac5c4;
    margin-right: -3px;
    font-size: 1.3em;
    vertical-align: middle;
    display: inline;
    letter-spacing: 0.0125em;
    white-space: nowrap;
    /*margin-bottom: 1em;*/
}

#intro-description {
    width: 50% !important;
}

#surveys-list-container {
    display: block;
    float: left;
    width: 100%;
    position: relative;
    margin-bottom: 16px;
}

我有什么想法可以调整它以便它们响应地移动吗？

谢谢!

编辑 - 添加带有附加 row 和 col-xs-6 的 html 代码以及结果输出:

<div id="surveys" class="surveys col-xs-12">
    <div>
        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-12" id="title">
                    <h4 style="text-transform: uppercase;">Surveys</h4>
                </div>
                <div id="surveys-list" class="col-xs-12">
                    <div>
                        <div id="surveys-list-container row">
                            <div class="survey-item col-md-3 col-xs-6">
                                <div id="2697033" class="item survey">
                                    <span class="note new">&nbsp;Opened&nbsp;</span>
                                    <div id="reward-box" class="reward-box">
                                        <div>
                                            <p class="amount">
                                                <i class="fa fa-plus"></i>

                                                <span class="value">49</span>
                                                <span class="currency">reward points</span>
                                                <span class="hidden">+More</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div id="loi-box" class="loi-box">
                                        <div class="loi">
                                            <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20">
                                            <span class="duration">10 min survey</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="survey-item col-md-3 col-xs-6">
                                <div id="2697013" class="item survey">
                                    <span class="note new">&nbsp;Opened&nbsp;</span>
                                    <div id="reward-box" class="reward-box">
                                        <div>

                                            <p class="amount">
                                                <i class="fa fa-plus"></i>

                                                <span class="value">85</span>
                                                <span class="currency">reward points</span>
                                                <span class="hidden">+More</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div id="loi-box" class="loi-box">
                                        <div class="loi">
                                            <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20">
                                            <span class="duration">20 min survey</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="survey-item col-md-3 col-xs-6">
                                <div id="2697033" class="item survey">
                                    <span class="note new">&nbsp;Opened&nbsp;</span>
                                    <div id="reward-box" class="reward-box">
                                        <div>
                                            <p class="amount">
                                                <i class="fa fa-plus"></i>

                                                <span class="value">49</span>
                                                <span class="currency">reward points</span>
                                                <span class="hidden">+More</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div id="loi-box" class="loi-box">
                                        <div class="loi">
                                            <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20">
                                            <span class="duration">10 min survey</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="survey-item col-md-3 col-xs-6">
                                <div id="2697013" class="item survey">
                                    <span class="note new">&nbsp;Opened&nbsp;</span>
                                    <div id="reward-box" class="reward-box">
                                        <div>

                                            <p class="amount">
                                                <i class="fa fa-plus"></i>

                                                <span class="value">85</span>
                                                <span class="currency">reward points</span>
                                                <span class="hidden">+More</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div id="loi-box" class="loi-box">
                                        <div class="loi">
                                            <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20">
                                            <span class="duration">20 min survey</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="survey-item col-md-3 col-xs-6">
                                <div id="2697033" class="item survey">
                                    <span class="note new">&nbsp;Opened&nbsp;</span>
                                    <div id="reward-box" class="reward-box">
                                        <div>
                                            <p class="amount">
                                                <i class="fa fa-plus"></i>

                                                <span class="value">49</span>
                                                <span class="currency">reward points</span>
                                                <span class="hidden">+More</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div id="loi-box" class="loi-box">
                                        <div class="loi">
                                            <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20">
                                            <span class="duration">10 min survey</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="survey-item col-md-3 col-xs-6">
                                <div id="2697013" class="item survey">
                                    <span class="note new">&nbsp;Opened&nbsp;</span>
                                    <div id="reward-box" class="reward-box">
                                        <div>

                                            <p class="amount">
                                                <i class="fa fa-plus"></i>

                                                <span class="value">85</span>
                                                <span class="currency">reward points</span>
                                                <span class="hidden">+More</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div id="loi-box" class="loi-box">
                                        <div class="loi">
                                            <img src="http://d34x0w7b7efh78.cloudfront.net/pl/js/iFrameV4/images/customizable/Iframe_icon-survey-LOI.svgx?publisherId=8549&amp;style=8e0056f626fc736c93d0e68f08b14008" width="20" height="20">
                                            <span class="duration">20 min survey</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

笔记本电脑(它似乎只是在 div 的外部添加填充):

移动端(似乎只是把它揉得更紧):

编辑 - 我认为有问题的 CSS 就在这里，当我重新添加它时，它似乎破坏了功能:

#surveys .survey-item {
    float: left;
    width: 19.2%;
    display: inline-block;
    margin: 5px 0.8% 5px 0;
    border-radius: 7px 7px 6px 6px;
    border-width: 1px;
    border-style: solid;
    position: relative;
    cursor: pointer;
    background-color: #FFFFFF;
    border-color: #dddddd;
    -moz-box-shadow: 0 2px 0 0 #cccccc;
    -webkit-box-shadow: 0 2px 0 0 #cccccc;
    box-shadow: 0 2px 0 0 #cccccc;
    padding-left: 0px;
    padding-right: 0px;
}

最佳答案

自定义 CSS 中有几处会导致问题。主要与设置每个元素的宽度和边距有关。只需让每个元素填充 col-*..

#surveys .survey-item {
    display: block;
    margin: 5px 0;
    border-radius: 7px 7px 6px 6px;
    border-width: 1px;
    border-style: solid;
    position: relative;
    cursor: pointer;
    background-color: #FFFFFF;
    border-color: #dddddd;
    -moz-box-shadow: 0 2px 0 0 #cccccc;
    -webkit-box-shadow: 0 2px 0 0 #cccccc;
    box-shadow: 0 2px 0 0 #cccccc;
}

我还清理了 HTML。有很多嵌套级别。只需确保 col 始终是“行”的直接子元素即可。

http://www.codeply.com/go/dqgFudTPTU

关于jquery - HTML CSS 响应式 Div Bootstrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42845277/

文章推荐： python - 如何使用 arg 解析器库打印参数传递文件的前 n 行

文章推荐： c - nvprof 没有获取任何 API 调用或内核

文章推荐： c - fscanf while-loop 从不运行

twitter-bootstrap - Bootstrap、Twitter Bootstrap 和 Bootstrap 3 之间有什么区别？
有人可以告诉我 Bootstrap、Twitter Bootstrap 和 Bootstrap 3 之间有什么区别吗？最佳答案在 CSS 框架的上下文中，Bootstrap 和 Twitter B
twitter-bootstrap - Bootstrap 文档中的屏幕阅读器是什么？？？ >>>[ Bootstrap 文件]
什么是 Bootstrap 文档中的屏幕阅读器？？？ >>> bootstrap document 不知道什么是屏幕阅读器？最佳答案它是视力不佳或由于某种原因无法从屏幕上阅读的人使用的工具；它会向
twitter-bootstrap - Bootstrap : How do I identify the Bootstrap version?
我想更新网站上的 Bootstrap，但我不知道安装的版本。如何仅使用 bootstrap.css 和 bootstrap.min.js 文件来识别 bootstrap 版本？ CSS 文件中没有版
twitter-bootstrap - Bootstrap.js、Bootstrap.min.js、Bootstrap-table.js 有什么区别
很抱歉问了这么一个愚蠢的问题，但我真的不清楚这些。 Bootstrap 是一个非常棒的库，它节省了开发人员的大量工作。因为它提供了很多功能，比如节省大量时间。响应式功能。一致的设计。便于使用
twitter-bootstrap - 如何使用 ng2-bootstrap 从 Bootstrap 3 切换到 Bootstrap 4？
我正在使用 ng2-bootstrap对于 Angular 2 项目。这个包同时支持Bootstrap 3和4，我安装后默认使用Bootstrap 3。我没有找到任何关于切换的信息。如何从 Boo
twitter-bootstrap - 我在 "ngx-bootstrap"和 "@ng-bootstrap/ng-bootstrap"之间感到困惑
我计划在我的项目中使用 Bootstrap 4 和 angular 4，但我对 npm install --save @ng-bootstrap/ng-bootstrap 和 npm install
twitter-bootstrap - 如何使用 Bootstrap 类将 Bootstrap 警报高度显示为较小的字体？
单击删除按钮后，我设置了警报。但它的默认高度更大，我想让它更小(高度)。我试过 display-4 属性(property)，但它没有工作。我已通过 w-50 将宽度设置为屏幕的一半，但警报的一
twitter-bootstrap - 在 Bootstrap 按钮下拉列表中显示 Bootstrap 选择
我使用 Bootstrap 按钮下拉菜单来显示表单。我通过调用 stopPropagation 禁用了单击时消失的下拉菜单(当用户操作表单时) .表单的元素之一是下拉列表。如果我使用 native h
twitter-bootstrap - twitter-bootstrap 中 "bootstrap"这个词的含义
twitter-bootstrap 中的“bootstrap”一词是什么意思？在许多 gem 中都有“bootstrap”这个词。我搜索了其中的含义，但无法得出结论。那么有人可以在这种情况下给出“Bo
twitter-bootstrap - Bootstrap 5 仍然推荐使用 Bootstrap-vue？
由于 Bootstrap 5 不再使用 jQuery 并且正在使用 vanilla JS，我想知道是否仍然建议使用 Bootstrap-Vue，不管 Bootstrap-Vue 还不支持 Bootst
twitter-bootstrap - Bootstrap typeahead 在 Bootstrap 模式中不起作用
我正在使用 codeigniter 框架，我正在使用 bootstrap typeahead，一切都很好，但我的问题是当我将它放在 bootstrap 模式中时，bootstrap typeahead
twitter-bootstrap - Bootstrap 5 引用错误 : bootstrap is not defined
我刚刚完成安装 bootstrap 5 版本 ^5.0.0-alpha1并在 app.js 中导入 Bootstrap import "bootstrap" 其他.js var myModal = n
twitter-bootstrap - Bootstrap ScrollSpy 似乎正在破坏 Bootstrap 选项卡
我一直在尝试在使用选项卡的页面上实现 ScrollSpy。这是我的 body 标签: 这是我的标签 HTML: Home Profile
twitter-bootstrap - Twitter Bootstrap 和 Bootstrap-Xtra
如果您选择使用 Bootstrap-Xtra，您是否应该也包括原始的 bootstrap.css，或者 bootstrap-xtra.css 应该是一个完整的替代品。例如，bootstrap-xtr
twitter-bootstrap - 如何使用 Bootstrap 日期选择器作为输入创建 Bootstrap 框提示符
我正在使用 bootbox 创建一个对话框。 bootbox.dialog({ message: 'Datepicker input: ', title: "Custom label"
twitter-bootstrap - react Bootstrap 中的 Bootstrap "type alignment"
我正在将使用 Bootstrap 构建的 Web 应用程序迁移到 React 和 react-bootstrap，两者都很棒。我在 react-bootstrap 中没有看到的一件事是如何顺利集成 B
twitter-bootstrap - 为什么 bootstrap 3 中的 bootstrap 默认按钮对我来说是深灰色的？
我正在使用 Bootstrap 3 RC，默认按钮是带有黑色文本的深灰色，而不是带有黑色文本的浅灰色。我已经尝试过 CDN 链接和离线。我还清空了我的浏览器缓存以防万一。有没有其他人经历过这个？这可能
twitter-bootstrap-3 - bootstrap-tagsinput with typeahead, bootstrap-3
在我的一个项目中，我曾经有 bootstrap-tagsinput http://timschlechter.github.io/bootstrap-tagsinput沿着 bootstrap-2.3
twitter-bootstrap - AngularUI/Bootstrap 是否支持 twitter-bootstrap 3？
下拉菜单在 Angular-UI-Bootstrap 中不起作用？使用 Bootstrap-3 CSS 以下是代码。链接Click me for a dropdown出现。但不会在点击时切换。怎么了？
twitter-bootstrap - 如何在 Bootstrap Table 中添加 Bootstrap 按钮
如何在 Bootstrap Table 中添加 Bootstrap 按钮最佳答案我已经想出了解决办法。我想和大家分享。这是我的 table : # Visit

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - HTML CSS 响应式 Div Bootstrap