Bootstrap - 如何在调整浏览器大小时始终向左浮动一列并保持大小固定

Question

在下面的html中，我使用bootstrap创建了两列。我遇到的问题是，当浏览器重新调整大小时，列之间的填充/边距会增加和减少。另外，第二列（div id = filterHeading）的大小也增加或减少。我希望第二列始终向左浮动并保持大小固定。是否有一种可以促进的＆＃39;这样做的方法？

<div style="height:100%; width:100%; padding-right:15px" class="panel-body">
    <div class="row ">
        <div class="col-md-4 nopadding">
            <div>
                <label for="cmbDataSets">Select Data Set:</label>
                <select id="cmbDataSets" data-bind="options: dataSets, optionsText:'descr', value:selectedDataSet, optionsCaption:'Choose'" class=" form-control"></select>
            </div>
            <div>
                <label for="cmbInstruments">Select Data Item:</label>
                <select id="cmbInstruments" data-bind="options: instruments, optionsText:'instrument', value:selectedInstrument, optionsCaption:'Choose'" class=" form-control"></select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default nopadding">
                <div id="filterHeading" class="panel-heading minpadding"><b>Show Only:</b></div>
                <div id="optDataCats" data-bind="foreach: dataCategories" class="panel-body" style="padding: 0px 0px 0px 10px">
                    <div class="checkbox">
                        <input type="checkbox" data-bind="attr: {value:category}, checked: selectedDataCategories"><span data-bind="text:descr" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr />
    <div data-bind="text: ko.toJSON($root)"></div>
    <table id="gridCot"></table>
    <div id="pager"></div>
</div>

我知道我可以使用表来解决这个问题，我很想做，只是使用bootstrap来控制外观而不是布局。但我想在去那里之前，我想知道这是否可以很容易地完成w / bootstrap。

感谢