Question

我正在使用Bootstrap 3.0，它提供col-md-value（值-1-12）的宽度。我必须使用它设计一个页面。总页面宽度为1000px，分为2个部分宽度分别为280和720。

为了实现1000px，我已经将'容器'的最大宽度更改为1000px，但是如果我使用col-md-3则达到280px，如果我使用col-md-则以像素250px为单位提供25％的宽度4它给出了300多个

所以我的问题是如何通过使用col-mds来实现这两个宽度，因为如果我们自己创建自定义样式，那么bootstrap将不会为我们提供响应性质？该标记如下所示：

   <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>

Answer 1

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

例如

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

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

此样式仅适用于显示宽度超过1000像素的屏幕;和bootstrap将适用于其他resolution.use任何近似值col.md。

Answer 2

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

首先......为什么需要720＆amp;如果要求也有一个响应页面，280总共1000px？您有没有机会说服谁决定了两个部分的绝对宽度，相对宽度对于实际响应的页面/网站来说会更好？（

问题

据我所知，你将遇到的根本问题是bootstrap使用12列网格。这意味着它将实际像素数分成12个相等的部分，以确定列宽。

如果我们将1000px划分为12（1000/12）部分：

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

上述任何一个都不会给你720px ... 9基本上会给你750px（不知道在浏览器中如何处理它，但我希望会发生标准舍入）。

另一方面，

8会给你，最有可能的是，667px。

如果你使用剩余的3或4个网格部分进行上述操作可能很明显，你也不会得到280px。

可能的解决方案

如果你能说服必要的人将1000px分成280px和2的2个部分。 720px不是最佳选择，因此您的选项范围会大幅增加。

最简单的选择是在保持1000px宽度的情况下保持1000px的宽度并且可以使用col-md-9＆amp; col-md-4 ...这将给你大约750px的部分＆amp;一个333px的部分（仍然处理像素的分数，因此不确定浏览器将如何处理这个...但我确定它会以某种方式舍入）。如果你想更接近原始比例，你可以增加或减少最大宽度，说1080px（因为12均匀地进入它）或970px ... 我提到970px，因为这是.col-md的预期宽度，如标注here in the bootstrap documentation。
我建议1080px以获得最接近原始比率。如果您为720px部分选择col-mid-8，宽度为1080px，此部分实际上将是720px。如果您为280px部分选择col-mid-3，宽度为1080px，此部分实际上大约为279px。

最后，如果你真的需要使用页面的绝对宽度和两个部分的绝对宽度，我怀疑你必须做@Pradip Borde建议的内容

或者，或者只是write the CSS你自己。

如何在bootstrap 3.0中使用col-mds实现特定宽度？

2 个答案: