blocks|key|224332|text|在Bootstrap+3中没有简单的方法来混合流体和固定宽度，它应该是这样的，因为网格系统被设计成一个流动的、响应式的东西。你可以尝试修改一些东西，但这将与响应式网格系统试图做的事情背道而驰，其目的是使布局在不同的设备类型之间流动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224333|如果您需要坚持这种布局，我会考虑使用自定义CSS来布局您的页面，而不是使用网格。|224334|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>There's really no easy way to mix fluid and fixed widths with Bootstrap 3.  It's meant to be like this, as the grid system is designed to be a fluid, responsive thing.  You could try hacking something up, but it would go against what the Responsive Grid system is trying to do, the intent of which is to make that layout flow across different device types.</p>

<p>If you need to stick with this layout, I'd consider laying out your page with custom CSS and not using the grid.</p>


blocks|key|224361|text|为什么不在您自己的css中将左边的两列设置为固定的，然后为其余的内容创建一个完整12列的新网格布局？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224362|<div+class="row">
++++<div+class="fixed-1">Left+1</div>
++++<div+class="fixed-2">Left+2</div>
++++<div+class="row">
++++++++<div+class="col-md-1"></div>
++++++++<div+class="col-md-11"></div>
++++</div>
</div>|code-block|syntax|javascript|224363|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Why not just set the left two columns to a fixed with in your own css and then make a new grid layout of the full 12 columns for the rest of the content?</p>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="fixed-1"&gt;Left 1&lt;/div&gt;
    &lt;div class="fixed-2"&gt;Left 2&lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-md-1"&gt;&lt;/div&gt;
        &lt;div class="col-md-11"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|7824|text|或将显示属性与表格单元一起使用；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7825|css|7826|.table-layout+{
++++display:table;
++++width:100%25;
}
.table-layout+.table-cell+{
++++display:table-cell;
++++border:solid+1px+#ccc;
}

.fixed-width-200+{
++++width:200px;
}|code-block|syntax|javascript|7827|html|7828|<div+class="table-layout">
++++<div+class="table-cell+fixed-width-200">
++++++++<p>fixed+width+div</p>
++++</div>
++++<div+class="table-cell">
++++++++<p>fluid+width+div</p>++++
++++</div>
</div>|7829|http://jsfiddle.net/DnGDz/|offset|length|7830|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|12|8|@]|9|@$O|13|P|14|1|15]]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|N]]]]

<p>or use display property with table-cell;</p>

<p>css</p>

<pre><code>.table-layout {
    display:table;
    width:100%;
}
.table-layout .table-cell {
    display:table-cell;
    border:solid 1px #ccc;
}

.fixed-width-200 {
    width:200px;
}
</code></pre>

<p>html</p>

<pre><code>&lt;div class="table-layout"&gt;
    &lt;div class="table-cell fixed-width-200"&gt;
        &lt;p&gt;fixed width div&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="table-cell"&gt;
        &lt;p&gt;fluid width div&lt;/p&gt;    
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/DnGDz/">http://jsfiddle.net/DnGDz/</a></p>


blocks|key|224414|text|好的，我的回答非常好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224415|<style>
++++#wrapper+{
++++++++display:flex;++++
++++++++width:100%25;
++++++++align-content:+streach;
++++++++justify-content:+space-between;
++++}++++

++++#wrapper+div+{
++++++++height:100px;
++++}

++++.static240+{
++++++++flex:+0+0+240px;
++++}
++++.static160+{
++++++++flex:+0+0+160px;
++++}

++++.growMax+{
++++++++flex-grow:+1;
++++}

</style>

<div+id="wrapper">
++<div+class="static240"+style="background:red;"+>+</div>
++<div+class="static160"++style="background:+green;"+>+</div>+
++<div+class="growMax"++style="background:yellow;"++></div>
</div>|code-block|syntax|javascript|224416|jsfiddle+playground|offset|length|224417|如果您希望支持所有浏览器，请使用https://github.com/10up/flexibility|224418|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/darekf77/37zL8puu/|1|https://github.com/10up/flexibility^0|0|0|0|J|0|0|G|Z|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>OK, my answer is super nice:</p>

<pre><code>&lt;style&gt;
    #wrapper {
        display:flex;    
        width:100%;
        align-content: streach;
        justify-content: space-between;
    }    

    #wrapper div {
        height:100px;
    }

    .static240 {
        flex: 0 0 240px;
    }
    .static160 {
        flex: 0 0 160px;
    }

    .growMax {
        flex-grow: 1;
    }

&lt;/style&gt;

&lt;div id="wrapper"&gt;
  &lt;div class="static240" style="background:red;" &gt; &lt;/div&gt;
  &lt;div class="static160"  style="background: green;" &gt; &lt;/div&gt; 
  &lt;div class="growMax"  style="background:yellow;"  &gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><a href="https://jsfiddle.net/darekf77/37zL8puu/" rel="nofollow">jsfiddle playground</a></p>

<p>if you wanna support for all browser, use <a href="https://github.com/10up/flexibility" rel="nofollow">https://github.com/10up/flexibility</a></p>


<p>I am learning how to use Bootstrap. Currently, I'm wading my way through layouts. While Bootstrap is pretty cool, everything I see seems dated. For the life of me, I have what I think is a basic layout that I can't figure out. My layout looks like the following:</p>

<pre><code>---------------------------------------------------------------------------
|       |       |                                                         |
|       |       |                                                         |
| 240px | 160px | All Remaining Width of the Window                       |
|       |       |                                                         |
|       |       |                                                         |
--------------------------------------------------------------------------|
</code></pre>

<p>This grid needs to take up the full height of the window. From my understanding, I need to mix fixed and fluid widths. However, Bootstrap 3.0 doesn't seem to have the fluid class anymore. Even if it did, I can't seem to figure out how to mix fluid and fixed column sizes. Does anyone know how to do this in Bootstrap 3.0?</p>


Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes

我正在学习如何使用Bootstrap。目前，我正在摸索布局。虽然Bootstrap很酷，但我看到的一切似乎都过时了。对于我的生活来说，我有一个我认为是我无法弄清楚的基本布局。我的布局如下所示：----------------------------------------------------------------...

问Bootstrap 3.0 -包含固定列大小的流体网格
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3.0 -包含固定列大小的流体网格EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3.0 -包含固定列大小的流体网格
EN