【问题标题】:box-sizing border-box not working horizontally on bootstrapbox-sizing 边框框不能在引导程序上水平工作
【发布时间】:2018-01-11 12:23:24
【问题描述】:

![框大小不适用于第一个对象][1]

我在引导时遇到问题,当它缩小到最大值时,列表是水平的,并且第一个 div 的高度更大,它只是把一切都搞砸了,当秒数更大时它可以完美地工作。

![box sizing 作用于第二个对象而不是第一个对象。][1]

我已经尝试过给项目:显示内联,内联块。似乎没有任何效果。我尝试提供 box-sizing 课程,但它不起作用。

我已经尝试了好几个小时了,我不知道要走什么路才能让它发挥作用。

这是一个实时预览: http://www.desarmaduriaipar.cl/bs_index.php

         <div class="box-sizing col-sm-3  col-xs-6">
            <div class="product-box">

                    <a title="alt" alt="alt" href="/desarmaduria/desarme/845/hyundai-accent-2012-2013-2014-2015-2016-2017">
                    <img src="http:www.desarmaduriaipar.cl/cars/thumbs/51501541613.jpg" width="100%" border="0">
                    <h3>Hyundai<br/>Accent 2012-2017</h3>
                    </a>

            </div>
        </div>

更新:

这是修复: .row.fix{ 显示:弹性, 弹性包装:换行; }

【问题讨论】:

  • 请在问题本身中发布足够的代码以重现问题。
  • @Michael_B 更新了!

标签: css html twitter-bootstrap grid-layout


【解决方案1】:

问题是由于盒子(.product-box)的高度不一致,解决方法是为类product-box设置min-height属性,该属性等于最高.product-box元素的高度

.product-box{
    min-height : 200px;
}

【讨论】:

  • 我之前在没有 boostrap 的情况下已经让这段代码工作了,但是使用 bootstrap 就成了一个问题。
  • 这是修复我的朋友我不得不提高一个 div .row.fix{ display: flex, flex-wrap: wrap; }
猜你喜欢
  • 1970-01-01
  • 2023-03-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-10-28
  • 2016-04-03
  • 2013-10-19
  • 2018-01-18
相关资源
最近更新 更多