html - Bootstrap 3 中的列 + 旋转木马高度不相等的问题

标签 html css twitter-bootstrap-3 responsive-design media-queries

我希望有人能帮助我解决我遇到的 Bootstrap 3 问题。

屏幕截图比我用英语解释的方式更好地解释了问题。所以，请看下文。

Bootstrap 3 colum equal/matching height problem

如您所见，我在左侧有 2 列，在右侧有 1 列，还有 Bootstrap 轮播。但问题是，我在左栏下得到了空白(白色)空间。

我希望右列 + 旋转木马的高度与左列相匹配。所以一切都对齐了。左边的列有正确的高度(在我的真实设计中已经有文本内容)。我认为这应该是可能的，但我不知道如何实现这一目标。

我自己尝试了一些奇怪的事情，虽然它适用于一种浏览器，但显然不适用于另一种浏览器。所以我正在为此寻找解决方案。我认为对轮播进行一些更改是可能的吗？

由于这只是我正在处理的整个网站的(小)部分，我将粘贴必要的代码。也许有人可以看看并提出解决方案或想法？

(请忽略内联的东西，在我添加类之前我还在测试一些东西)

部分 HTML 代码:

<div class="row clearfix no-gutter">
    <div class="col-md-7 column">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="box-contents fontsize938">
                        <div style="float:right;font-size:0.938em;padding-top:10px;color:#777;">subtitleright</div>
                        <img src="images/mini_logo.png" width="21" height="22" class="minilogo" alt=""/><h4>Header</h4>
                        <div class="multiColumn">
                        <ul class="webss">
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                        </ul>
                        </div>
                        <div style="height:22px;padding:2px 8px 0 7px;">
                            <div style="float:left;"><a class="weblink" href="info.php" title="Ipsum Lorem stuff" target="_parent"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp; Ipsum Lorem stuff</a></div>
                            <div style="float:right;"><a class="weblink" href="best.php" title="Ipsum Lorem stuff" target="_parent"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>&nbsp; Ipsum Lorem stuff</a></div>
                        </div>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="box-contents fontsize938">
                        <div style="float:right;font-size:0.938em;padding-top:10px;color:#777;">subtitleright</div>
                        <img src="images/mini_logo.png" width="21" height="22" class="minilogo" alt=""/><h4>Header</h4>
                        <div class="multiColumn">
                        <ul class="webss">
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                            <li><span class="glyphicon glyphicon-play smallglyph" aria-hidden="true"></span> Ipsum Lorem stuff</li>
                        </ul>
                        </div>
                        <div style="height:22px;padding:2px 8px 0 7px;">
                            <div style="float:left;"><a class="weblink" href="info.php" title="Ipsum Lorem stuff" target="_parent"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp; Ipsum Lorem stuff</a></div>
                            <div style="float:right;"><a class="weblink" href="best.php" title="Ipsum Lorem stuff" target="_parent"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>&nbsp; Ipsum Lorem stuff</a></div>
                        </div>  
                </div>         
            </div>
        </div>
    </div>

    <div class="col-md-5">
        <div class="row">
            <div class="col-md-12">
              <form method="post" action="req.php" id="checkd1" class="formd">
                <div class="input-group input-group-sm">
                    <span class="input-group-addon broundleft"><i class="glyphicon glyphicon-globe"></i></span>
                    <input type="text" class="form-control" name="webbb" placeholder="Ipsum Lorem stuff">
                    <input type="hidden" name="request" value="single">
                    <span class="input-group-btn"><button class="btn btn-primary broundright" type="submit"><i class="glyphicon glyphicon-search"></i> &nbsp;Check!</button></span>
                </div>                
              </form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 column">
                <div id="carousel-index" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="item active"><img src="images/gallery1.jpg" alt="Ipsum Lorem stuff"></div>
                        <div class="item"><img src="images/gallery2.jpg" alt="Ipsum Lorem stuff"></div>
                        <div class="item"><img src="images/gallery3.jpg" alt="Ipsum Lorem stuff"></div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>

轮播 CSS:

.carousel-inner>.item>img, .carousel-inner>.item>a>img{
display:block;
height:auto;
max-width:100%;
line-height:1;
width:100%;
overflow:hidden;
border-radius:6px; 
-moz-border-radius:6px; 
-webkit-border-radius:6px;
-khtml-border-radius:6px;
border:1px solid #fff;
}
.carousel{
border-radius:6px; 
-moz-border-radius:6px; 
-webkit-border-radius:6px;
-khtml-border-radius:6px;
border:1px solid #d5d5d5;
-moz-box-shadow: 2px 2px 1px #e1e1e1;
-webkit-box-shadow: 2px 2px 1px #e1e1e1;
box-shadow: 2px 2px 1px #e1e1e1;
overflow:hidden;
}

如果您需要我提供更多信息，请询问。我已经很高兴你正在看这个。非常感谢...!

//更新#1

根据要求，我创建了(我的第一个)JSFiddle，它位于此处:http://jsfiddle.net/Lx3pc7rm/1/

您必须调整窗口宽度(最大)才能看到我遇到的问题。同样在较小的尺寸上，轮播与左列不匹配。

//更新#2

好吧，我尝试了在 Stackoverflow 和其他地方找到的几种解决方案，但没有一个有效。我还尝试设置“max-height:332px;”到旋转木马。这有效，但非常有限。在 Firefox 中它可以工作，但其他浏览器不能(可能是由于 HTML/CSS 导致的大小不匹配)。此外，当窗口尺寸变小时，高度会更小(= 更小)。

我希望有人能提供一个可行的解决方案，甚至可以使用 javascript？

最佳答案

这是工作 fiddle http://jsfiddle.net/Lx3pc7rm/3/ .

因为 Bootstrap 将轮播图像高度设置为 auto 以允许它根据其宽高比展开。因此，您必须固定旋转木马图像的高度，以便它不会随着屏幕大小的调整而改变。为此，只需在您的 CSS 中添加以下媒体查询，

@media (min-width: 1200px){
.carousel-inner>.item>img, 
.carousel-inner>.item>a>img{
    height: 295px;    
}  
}
@media (min-width: 992px){
.carousel-inner>.item>img, 
.carousel-inner>.item>a>img{
    height: 295px;    
}  
}

虽然这可能会导致图像拉伸(stretch)，但它会达到您想要的效果。

<-----更新----->

这是一个 jquery 解决方案，查看更新的 fiddle http://jsfiddle.net/Lx3pc7rm/6/

只需包含 jquery 和这段代码，

$(document).ready(function(){
    $(window).resize(function(){
        if (window.matchMedia('(min-width: 992px)').matches || window.matchMedia('(min-width: 1200px)').matches) {
            var newHeight = $('#col7').outerHeight() - $('#row1').outerHeight() - 10;
            $('#carousel-index .item img').css('height',newHeight+'px');
        }
        else{
            $('#carousel-index .item img').css('height','auto');
        }
    });
    $(window).resize();
});

window.matchMedia() 与 CSS 媒体查询完全一致，浏览器支持相当好。虽然，它不支持 IE9。

关于html - Bootstrap 3 中的列 + 旋转木马高度不相等的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31024471/

上一篇：javascript - 在 firefox 调整大小时加载适当大小的图像

下一篇：css - 浏览器如何决定使用什么 : http or https (tinymce load of @font-face error)

相关文章：

html - 如何仅使用 CSS 定位我的元素？

html - SVG 文本元素超出父宽度

javascript - 如何调整adminLTE模板中的header和navigation bar的高度？

javascript - HTML 中的背景图像

html - 隐藏表格但在 CSS 中显示边框

css - Bootstrap - 如何在调整大小时(垂直和水平)保持 Bootstrap 列之间的空间？

html - 如何在 Bootstrap 图像上过度获取内容

html - Bootstrap 中的居中对齐菜单

javascript - 当用户开始滚动页面时隐藏链接

javascript - 为什么 Javascript 按钮不起作用？

©2024 IT工具网  联系我们