Question

我有两个 Bootstrap 列：

<div class="row">
    <div class="col-md-6"><div class="my"></div></div>
    <div class="col-md-6">some text</div>
</div>

由于col-md-6，它们都是半个网格。现在，我需要设置div.my的最小宽度。如果我应用min-width，我会产生副作用：在最小化时，div.my与父列重叠（在两列都是100％宽度之前）。

我无意设置列本身的最小宽度，因为div.my可能有边距。

我知道，我可以使用媒体查询，但有更好的解决方案吗？

此致

Answer 1

首先使用媒体查询，有什么理由没有？

它们可以让您完全控制任何给定大小的内容。

为防止重叠的div导致问题，您可以使用。

.col-md-6 {
    overflow: hidden;
}

最好使用不同的类，例如.col-md-6.no-overflow。

如果不知道.my div的内容和目的，很难给出确定的答案。

Answer 2

您可以使用calc()，width等css的min-width功能。

Answer 3

             <div class="row">
                <div class="col-sm-6" style="min-width:300px !important;"><div class="my"></div>
                </div>    
                <div class="col-sm-6">
                </div>
            </div>

试试这个

Answer 4

min-width属性用于设置该div在任何情况下都具有的最小width，因此它不会低于此宽度。你必须使用max-width：

div.my
{
max-width: 80%
}

对于响应性，使用％

总是好的

列中最小宽度的div，Bootstrap 3.2

4 个答案: