1

我使用的是 Bootstrap 3.0，它提供的宽度为col-md-value(value-1-12)。我必须使用它来设计一个页面。总页面宽度为 1000 像素，它分为宽度分别为 280 和 720 的两个部分。

为了实现 1000 像素，我将“容器”的最大宽度更改为 1000 像素，但是如果我使用 col-md-3 来实现 280 像素，它会以像素 250 像素的形式给出 25% 的宽度，如果我使用 col-md-4 它会给出300左右

所以我的问题是如何通过使用 col-mds 来实现这两个宽度，因为如果我们制作自己的自定义样式来实现这一点，那么引导程序将不会为我们提供其响应性？标记如下所示：

   <div class="container"><---1000px max-width-->
     <div class="col-md-12"> <--100% width--->
        <div class="col-md-value"> 
         </div>
        <div class="col-md-value">
         </div>
      </div>
    </div>
4

2 回答 2

1

您可以使用媒体查询添加自定义 CSS

例如

@media only screen and (min-width:1000px){
.col-md-value{
width: ---;
}

.col-md-value{
width: ---;
}
}

此样式仅适用于显示宽度超过 1000px 的屏幕；并且 bootstrap 将适用于其他分辨率。使用 col-md 的任何近似值。

于 2013-10-07T08:59:27.230 回答
0

您被要求做的事情似乎不一致。

首先...如果要求还具有响应式页面，为什么要求 720 和 280 总共 1000 像素？你有没有机会让决定两个部分的绝对宽度的人相信相对宽度对于实际响应的页面/站点会更好地工作？

问题

据我了解，您将遇到的基本问题是引导程序使用 12 列网格。这意味着它将实际像素数分成 12 个相等的部分来确定列宽。

如果我们将 1000px 分成 12 (1000/12) 个部分：

我们得到： 1000/12=83.333(repeating) ... ...
这意味着您正在处理像素的分数。
如果你想要一个 720px 的区域，那么除以 720x83.3 ...你会得到大约 9（取决于你出去的小数位数越接近 9 你会得到）。
为清楚起见，这是可用的 12 个网格部分中的 9 个。
然而，由于网格系统在 boostrap 中的工作方式，您可以选择正好 9 (col-md-9) 或正好 8 (col-md-8)。你不能选择 8.7... 这会让你非常接近 720 像素（同样取决于你对小数位的准确度。

以上都不会给你 720px ... 9 基本上会给你 750px （不确定在浏览器中是如何处理的，但我希望会发生标准舍入）。

另一方面，8 很可能会给你 667px。

很明显，如果您对剩余的 3 或 4 个网格部分执行上述操作，您也不会得到 280 像素。

一个可能的解决方案

如果您可以说服必要的人将 1000px 分成 280px 和 720px 的 2 个部分不是最佳的，那么您的选择范围会大大增加。

考虑到部分设置宽度的变化，最简单的选择是保持 1000px 宽度并且可以使用 col-md-9 和 col-md-4 ... 这将为您提供大约 750px 部分和 333px 部分（仍在处理小部分像素，因此不确定浏览器将如何处理...但我确信它会以某种方式舍入）。如果您想更接近原始比例，您可以增加或减少最大宽度，例如 1080 像素（因为 12 均匀地进入其中）或 970 像素……我提到 970 像素，因为这是 .col-md 的预期宽度，如前所述在引导文档中。
我推荐 1080px 以获得最接近原始比例。如果您为 720px 部分选择 col-mid-8，则宽度为 1080px，该部分实际上将是 720px。如果您为 280px 部分选择 col-mid-3，则宽度为 1080px，此部分实际上约为 279px。

不过，最后，如果您真的需要使用页面的绝对宽度和两个部分的绝对宽度，我怀疑您将不得不执行@Pradip Borde 的建议

或者，也可以自己编写 CSS。

于 2014-11-18T10:58:01.463 回答