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的网格系统功能的方式工作（假设窗口的渲染适用于＆＃34; md＆＃34;（中）大小的网格，因为＃39; s您在代码中使用的内容）。

以下是代码的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页面中拖动分隔符来分隔＆＃34;结果＆＃34;和＆＃34; CSS＆＃34;来自＆＃34; HTML＆＃34;的窗口和＆＃34; JS＆＃34;视窗。当你拖动时，你会看到当窗口很大时井水平渲染，然后如果窗口变得太小则渲染堆叠。

列将堆叠与水平渲染的大小基于列的类名中的xs，sm，md，lg指定。

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

Answer 2

您可以使用grid system
col-xs-12用于较小的屏幕
col-md-3适用于介质
你可以在你的案例中使用col-sm-3

Bootstrap在同一行显示div

2 个答案: