【问题标题】:Background color & height of div / stretch divdiv/stretch div的背景颜色和高度
【发布时间】:2016-09-09 19:53:01
【问题描述】:

我是 bootstrapper 新手,对 css 样式不太熟悉。我需要灰色条在主页上向左延伸。我不确定我做错了什么http://www.webconstruct.co.za/wis/terms.asp提前谢谢。

【问题讨论】:

    标签: javascript css twitter-bootstrap


    【解决方案1】:

    使用Flexbox(在Bootstrap 4 alpha中可用) - 文章末尾有一个类似布局的示例(不是Bootstrap制作的,但可以像这样自定义)

    更多:http://v4-alpha.getbootstrap.com/layout/flexbox-grid/

    【讨论】:

      【解决方案2】:

      这可以解决问题,但您必须对所有页面进行测试。 .col-sm-3 { margin-bottom: -255%; padding-bottom: 255%; }

      【讨论】:

        【解决方案3】:

        不幸的是,仅使用 CSS 并不是一件容易的事。我会用 jQuery 解决问题。

        $(function(){
            $('#leftcolmn').height($('#rightcolmn').height());
            $(window).resize(function(){
                $('#leftcolmn').height($('#rightcolmn').height());
            });
        });
        

        如果您在想要修改和获取值的两列上有一些类或 ID,则此解决方案会更好。

        代码:

        $(function(){
        
        });
        

        功能完全相同:

        $(document).ready(function(){
        
        });
        

        【讨论】:

        • $(function(){ $('leftcolmn').height($('rightcolmn').height()); $(window).resize(function(){ $('leftcolmn ').height($('rightcolmn').height()); }); });我在两个 div 中都添加了 id。我需要 document.getElementById 吗?以及如何调用 onload?
        • 我更新了我的答案。我使用 jQuery 速记方法调用文档就绪。
        • 好吧,现在感觉很愚蠢。我为 2 个 div 添加了 2 个 id。所以这是正确的吗?如何调用函数? $(function(){ $('.leftcolmn1').height($('.rightcolmn1').height()); $(window).resize(function(){ $('.leftcolmn1').height( $('.rightcolmn1').height()); }); });
        • 放入$(document).ready(function(){//code goes here});
        • 感谢汤姆的帮助。更新了jquery,改变了代码但没有乐趣.. $(document).ready(function(){$(function(){ $('.leftcolmn1').height($('.rightcolmn1').height()) ; $(window).resize(function(){ $('.leftcolmn1').height($('.rightcolmn1').height()); }); });});你能看看我的页面吗?
        猜你喜欢
        • 2015-01-15
        • 2014-08-26
        • 1970-01-01
        • 2018-05-04
        • 1970-01-01
        • 2014-12-10
        • 1970-01-01
        • 2021-11-19
        • 2012-09-20
        相关资源
        最近更新 更多