我有一个表格，在某些情况下会显示简单版本，在其他情况下会显示更复杂的版本。我有那个部分在工作。但表格是2列，需要按顺序排列。对于简单模式，隐藏第一列的所有第二列和部分。
他们希望我在2列中显示表单，当在简单模式下显示8个字段时，他们希望它（在全屏模式下）在2列4x4中显示它们但在复杂模式下它将是一个包含表单字段的列，另一个是复选框列表。
我怎样才能让这个表格像那样工作？ 当AdvancedFilter类项为简单版时，它将被隐藏。
概要。需要始终按所列顺序显示在2列中。有时会隐藏AdvancedFilter项目，并且在标准宽度使用期间，未隐藏的字段需要转换为第二列，并且在移动使用时需要返回到第1列。
<div class="row form-group">
<div class="col-md-5">
<div class="col-md-12">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />
</div>
</div>
<div class="col-md-12">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb2" />
</div>
</div>
<div class="col-md-12">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb3" />
</div>
</div>
<div class="col-md-12">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb4" />
</div>
</div>
<div class="col-md-12">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb5" />
</div>
</div>
<div class="col-md-12 AdvancedFilter">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<select id="sel1" />
</div>
</div>
<div class="col-md-12">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<Select id="sel2" />
</div>
</div>
<div class="col-md-12 AdvancedFilter">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<select id="sel3" />
</div>
</div>
<div class="col-md-12">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<select id="sel4" />
</div>
</div>
<div class="col-md-12 AdvancedFilter">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<select id="sel5" />
</div>
</div>
<div class="col-md-12 AdvancedFilter">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<select id="sel6" />
</div>
</div>
<div class="col-md-12 AdvancedFilter">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<select id="sel7" />
</div>
</div>
</div>
<div class="col-md-5 AdvancedFilter">
<div class="col-md-3">
<label class = "control-label col-md-3" }) />
</div>
<div class="col-md-9">
<div>
<checkbox id="cb1" />
</div>
<div>
<checkbox id="cb2" />
</div>
...
<div>
<checkbox id="cb16" />
</div>
</div>
</div>
</div>
（如果重要的是这是一个ASP.Net MVC Razor视图，但我不相信这对此很重要。）
答案 0 :(得分：2)
您可以尝试这样的事情：
如果您只想要彼此相同的2列4列。
像：
O O
O O ordered like this
O O
O O
<div class="row form-group">
<div class="col-md-5">
<div class="row">
<div class="col-md-6">
<!-- add this 4 times -->
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<!-- end of add -->
</div>
</div>
</div>
</div>
如果你想要2列4项。但彼此相邻
喜欢：
O O O O
ordered like this
O O O O
<div class="row form-group">
<div class="col-md-5">
<div class="row">
<div class="col-md-6">
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
<div class="col-md-6">
<label class = "control-label col-md-3" }) />
<div class="col-md-9">
<textbox id="tb1" />test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
抱歉格式化。但我测试了O代表te项目，所以你现在有两种可能性。有了这个
编辑：
我再次阅读你的问题。如果你希望它在不同的大小时以不同的格式显示。添加class="col-sm-12"或类似的东西。在大屏幕和中等屏幕上，它显示我创建的东西。当它变小时，它就会是彼此之下的所有8个项目
答案 1 :(得分：0)
您使用的是哪个版本的Bootstrap - 版本3？只是好奇。
我的理解是，您希望作为一行运行的每组列都嵌套在<div class="row"> div中？这可能是这对你有用的问题的主要部分。
另外，您发布的HTML不是有效的HTML，因此不容易进行实验 - 这是您的ASP.net输入吗？或者它的一些变化？就HTML而言，有些东西是无效的，因此很难尝试设置一个例子来处理。
答案 2 :(得分：0)
查找如何使用twitter bootstraps collumnlayout。它有3种基本尺寸，适用于3种屏幕尺寸。 LG MD和SM所以你可以通过只使用bootstrap来做你想要的，你可以在@H中实现它。布兰登他的问题