Question

您好我熟悉Bootstrap，但对它不熟悉。我正在使用它创建一个静态表单，但我似乎无法将这些面板与＆＃34; col-md-6＆＃34;并排放置。行内的类标记。

我一直在尝试阅读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>

现在我已经在这里使用了表格标签，并尝试了内嵌和水平形式，但我基本上试图让每个面板彼此并排放置。我似乎也遇到了问题＆＃34;其他＆＃34;标签出现在输入框之后。

小动作：Fiddle

*我可能有更好的方法将元素放在下一行而不是我使用的断行，但就像我说的，我是Bootstrap的新手，只会通过实践来学习。我假设使用＆＃34;行＆＃34;将它们垂直堆叠。

Answer 1

我有一个快速的小提琴。我认为你应该可以使用它来处理。

JSFiddle here

注意：我用过

form-group

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

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

1 个答案: