Twitter bootstrap 如何在Bootstrap3.0中使用ColMDS实现特定宽度？

我使用的是Bootstrap 3.0，它提供的宽度为

col md value

（value-1-12）。我必须使用它设计一个页面。页面总宽度为1000px，分为两部分，分别为280和720宽

为了达到1000px，我已经将“容器”的最大宽度更改为1000px，但是为了达到280px，如果我使用col-md-3，它将以像素为单位提供25%的宽度250px，如果我使用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>

---

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

e、 g

---

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

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

e、 g

---

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

要求您执行的操作似乎不一致

首先。。。如果要求同时具有响应页面，为什么要求720和280的总像素数为1000px？ 你有没有可能说服决定这两个部分绝对宽度的人，相对宽度对于一个真正有响应性的页面/站点来说会更好？

问题

据我所知，您将面临的基本问题是引导使用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和720px两部分不是最佳的，那么您的选择范围将大大增加

如果改变了部分的设置宽度，最简单的选择是保持1000px的宽度，并使用col-md-9和col-md-4…这将使您获得大约750px的部分和333px的部分（仍然处理像素的分数，所以不确定浏览器将如何处理这一点…但我确信它将以某种方式进行调整）。 如果你想更接近原始的比例，你可以增加或减少最大宽度，比如说1080px（因为12均匀地进入其中）或970px。。。 我之所以提到970px，是因为这是前面提到的.col md的预期宽度。
我建议使用1080px来获得最接近原始比率的值。 宽度为1080px，如果您为720px部分选择col-mid-8，则该部分实际上正好为720px。 宽度为1080px，如果为280px部分选择col-mid-3，则该部分实际上约为279px

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

---

或者，也可以是你自己。

要求你做的事情似乎不一致

首先……如果要求同时具有响应页面，为什么要求720和280的总像素数为1000px？ 你有没有可能说服决定这两个部分绝对宽度的人，相对宽度对于一个真正有响应性的页面/站点来说会更好？

问题

据我所知，基本问题是引导使用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

可能的解决方案

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