twitter-bootstrap Bootstrap 在同一行显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32126509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap show div in same row
提问by Turi
I need create a page with show Polls to users can vote. I want to show all in one row but if window go more little I want that the divs go down like this picture.
我需要创建一个页面，向用户显示民意调查可以投票。我想在一行中显示所有内容，但如果窗口变小，我希望 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>
回答by Ryan Griffith
Given your code example, this should just naturally work by the way which Bootstrap's grid system functions (assuming the window its rendering in works for the "md" (medium) sized grid since that's what you've used in your code).
鉴于您的代码示例，这应该按照 Bootstrap 的网格系统功能的方式自然地工作（假设窗口的渲染适用于“md”（中等）大小的网格，因为这是您在代码中使用的网格）。
Here is a JS Fiddle https://jsfiddle.net/ecztz3fq/example of the below code.
这是以下代码的 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>
You can pull up the example, run it, and then drag the divider in the JS Fiddle page that separates the "Result" and "CSS" windows from the "HTML" and "JS" windows. As you drag you'll see the wells render horizontally when the window is large, and then render stacked if the window becomes too small.
您可以拉起示例，运行它，然后拖动 JS Fiddle 页面中的分隔线，将“结果”和“CSS”窗口与“HTML”和“JS”窗口分开。当您拖动时，您会看到当窗口很大时水井水平渲染，如果窗口变得太小则渲染堆叠。
The size at which a column will stack vs. render horizontally is based on the xs, sm, md, lg designations in the column's class name.
列将堆叠与水平呈现的大小基于列的类名称中的 xs、sm、md、lg 指定。
Bootstrap grid system docs:http://getbootstrap.com/css/#grid
Bootstrap 网格系统文档：http : //getbootstrap.com/css/#grid
回答by Vishu238
you can use grid system
col-xs-12 for smaller screen
col-md-3 for medium
you can use col-sm-3 here in your case
您可以将网格系统
col-xs-12 用于较小的屏幕
col-md-3 用于中等
您可以在此处使用 col-sm-3 在您的情况下
