Bootstrap 在同一行显示 div

Question

我需要创建一个页面，向用户显示民意调查可以投票。我想在一行中显示所有内容，但如果窗口变小，我希望 div 像这张图片一样下降。

<div class="container-fluid">
<div class="row">
    <div class="col-md-3">
        <div class="header-encuesta">
            <span class="text-white">@Model.Name</span>
        </div>
        <div class="well">
            @using (Html.BeginForm("Vote", "Poll", routeValues: new { id = Model.Id, option = 0 }))
            {
                <ul>
                    @foreach (PollOptions option in Model.PollOptions)
                    {
                        <li>@Html.CheckBox(option.OptionName, false, new { onclick = "ActionVote('" + (Model.Id) + "','" + (option.Id) + "')" }) @option.OptionName</li>
                    }
                </ul>
            }
        </div>
    </div>
</div>

Answer 1

鉴于您的代码示例，这应该以 Bootstrap 的网格系统功能的方式自然地工作（假设窗口的渲染适用于“md”（中等）大小的网格，因为这是您在代码中使用的网格）。

这是以下代码的 JS Fiddle https://jsfiddle.net/ecztz3fq/示例。

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3">
            <div class="header-encuesta">
                <span class="text-white">Header</span>
            </div>
            <div class="well">
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="header-encuesta">
                <span class="text-white">Header</span>
            </div>
            <div class="well">
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

您可以拉起示例，运行它，然后拖动 JS Fiddle 页面中的分隔线，将“结果”和“CSS”窗口与“HTML”和“JS”窗口分开。当您拖动时，您会看到当窗口很大时水井水平渲染，如果窗口变得太小则渲染堆叠。

列将堆叠与水平呈现的大小基于列的类名称中的 xs、sm、md、lg 指定。

Bootstrap 网格系统文档： http : //getbootstrap.com/css/#grid