html - Bootstrap v3.1 - IE8 中的并排输入面板

Question

您好，我对 Bootstrap 很熟悉，但不是很熟悉。我正在使用它来创建静态表单，但我似乎无法让这些面板与行内的“col-md-6”类标签并排放置。

我一直在尝试阅读 Bootstrap 文档并查看其他示例，但到目前为止还没有成功。我一直在转动轮子修改类、更改 div、添加 div，但一直没有运气。

下面是我从我的表单中提取的代码，这是一个问题区域。

<div class="container">
<div class="form-group col-md-6">

    <div class="panel panel-default">
        <div class="row col-xs-3">
                <label for="strategy" class="control-label">Strategy</label>                            
                <input type="text" class="form-control" id="strategy" placeholder="Strategy" />
        </div>

        <br/>
        <br/>
        <br/>
        <br/>

        <div class="row col-md-6">
            <label>Type of Service:</label>
            <ul>
                <li class="checkbox">
                    <input type="checkbox" value="" />
                    Transport
                </li>
                <li class="checkbox">
                    <input type="checkbox" value="" />
                    Storage
                </li>
                <li class="checkbox">
                    <input type="checkbox" value="" />
                    Balancing
                </li>
                <li class="checkbox">
                    <input type="checkbox" value="" />
                    Park/Lend
                </li>
            </ul>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="row col-xs-3">
            <label for="internalBusinessUnit" class="control-label">Internal Business Unit</label>
            <input type="text" class="form-control" id="internalBusinessUnit" placeholder="Internal Business Unit" />
        </div>

        <br/>
        <br/>
        <br/>

        <div class="row col-md-6">
            <ul>
                <li class="checkbox">
                    <input type="checkbox" value="" />
                    Hub/Wheel
                </li>
                <li class="checkbox">
                    <input type="checkbox" value="" />
                    Exchange
                </li>
                <li class="checkbox">
                    <input type="checkbox" value="" />
                    Pooling
                </li>
                <li class="checkbox">
                    Other: 
                    <input type="checkbox" value="" />
                    <div class="col-xs-2">
                        <input type="text" class="form-control" id="other" placeholder="" />
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

现在我在这里有表单标签并尝试了表单内联和表单水平，但我基本上是试图让每个面板并排放置。我似乎也对输入框后面出现的“其他”标签有疑问。

fiddle 的好办法:Fiddle

*我可能有更好的方法将元素放置在下一行，而不是我使用的断行，但正如我所说，我是 Bootstrap 的新手，只能边做边学。我假设使用“行”会将它们垂直堆叠。

Answer 1

我很快摆弄了一下。我认为您应该能够使用它来处理。

JSFiddle here

注:我用过

form-group

并整理列以帮助布局表单元素。