Bootstrap 并行 - 表单对齐答案

【问题标题】：Bootstrap parallel - form allignmentBootstrap 并行 - 表单对齐
【发布时间】：2015-12-19 18:41:01
【问题描述】：

我有两种形式，我希望它们并行。即我想将窗口分成两部分并在每个部分中放置一个表格。

我还想将块的元素保持在中心。我正在尝试使用下面的代码。屏幕被拆分，元素位于所需部分。但没有得到中心。 Text0 和 Button0 属于同一个表单，其他所有表单都是另一个表单的一部分。

另外请建议我如何使用 class form-group 对表单元素进行分组。在这里，表单的不同元素位于不同的行中。并且每一行都有两种形式的元素。

<div class = "row">
  <div class="col-md-6">
         <input type="text" id="Text0" class="form-control"  placeholder = "Text" />
  </div>
    <div class="col-md-6">
      <div class="center-block">
        <select id="Select0" class="form-control col-md-6" style="width:auto;">
          <option value="1">V1</option>
          <option value="2">V2</option>
        </select>
      </div>
    </div>
</div>
<div class = "row">
  <div class="col-md-6">
    <div class="center-block">
      <input id="Button0" type="button" value="B0" class="btn btn-success btn-md col-md-6" style="width:auto;" onclick="b0Clicked();" />
    </div>
  </div>
  <div class="col-md-6">
    <div class="center-block">
      <input id="Button1" type="button" value="B1" class="btn btn-success btn-md col-md-6" style="width:auto;" onclick="b1Clicked();" />
      <input id="Button2" type="button" value="B2" class="btn btn-primary btn-md col-md-6" style="width:auto;" onclick="b2clicked();" /> 
    </div>
  </div>
</div>

【问题讨论】：

请提供一个小提琴...
@NoobEditor 感谢您的回复。但我不明白你到底在问什么。抱歉我最近开始编程了。
jsfiddle.net，在这里创建一个演示...保存它...并发回网址...欢迎来到编程伙伴的世界！ :)
@NoobEditor 这是哥们：jsfiddle.net/oynkw3hv/1 你可能需要稍微扩展结果部分才能看到 col-md-6 类的正确结果
mate...你的设计很混乱...Text0 和Button0 是同一个表格的一部分，那为什么要把它们分开row？另外，form 属性在哪里？您是否建议将form-control 类在这里视为form？

标签： css forms twitter-bootstrap

【解决方案1】：

我可能完全理解你的问题，也可能不完全理解，所以我希望这就是你要找的。我的DEMO 使用 Bootstrap 类和一些小时间 css 有两种相互平行的形式。

检查您的 JFiddle 代码后，我才意识到您掌握了 Bootstraping 的概念，但您只需要组织和了解如何映射您的页面。

该演示将向您展示一些关键概念，这些概念将帮助您让这些表单同时并排独立执行。

p.s 请记住始终首先从 col-xs-* 类开始。 Bootstrap 是一个手机优先的框架。

哦，由于您是新手，Jfiddle 不错，但 CodePen 更好；）

【讨论】：