Bootstrap 3中的列+转盘高度不相等的问题

Joanne 发表于 Dev

乔安妮

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

屏幕截图比我用英语可以更好地解释问题。因此，请参阅下文。

Bootstrap 3 colum等值/匹配高度问题

如您所见，我在左侧有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吗？

dsaket

这是工作的小提琴http://jsfiddle.net/Lx3pc7rm/3/。

由于Bootstrapauto会将轮播图像的高度设置为，以便使其根据其宽高比进行扩展。因此，您必须固定轮播图像的高度，以使其不会随着屏幕调整大小而改变。为此，只需在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;    
}  
}

尽管这可能会导致图像拉伸，但可以实现您想要的效果。

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

这是一个jquery解决方案，请查看更新的小提琴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。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-03-31

我来说两句

0 条评论

登录后参与评论

上一篇：如何获得Qt5应用程序以在Ubuntu 17.04中使用GTK主题？

Bootstrap 3中的列+转盘高度不相等的问题

Bootstrap 3中的列+转盘高度不相等的问题

Linux的官方Adobe Flash存储库是否已过时？

用日期数据透视表和日期顺序查询

应用发明者仅从列表中选择一个随机项一次

Java Eclipse中的错误13，如何解决？

在Windows 7中无法删除文件（2）

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

套接字无法检测到断开连接

带有错误“ where”条件的查询如何返回结果？

有什么解决方案可以将android设备用作Cast Receiver？

Mac OS X更新后的GRUB 2问题

ggplot：对齐多个分面图-所有大小不同的分面

验证REST API参数

如何从视图一次更新多行（ASP.NET - Core）

尝试反复更改屏幕上按钮的位置 - kotlin android studio

计算数据帧中每行的NA

检索角度选择div的当前值

离子动态工具栏背景色

UITableView的项目向下滚动后更改颜色，然后快速备份

VB.net将2条特定行导出到DataGridView

蓝屏死机没有修复解决方案

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException