Question

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

另外，我想将块的元素保持在中心位置。我正在尝试使用下面的代码。屏幕分裂，元素在所需的部分。但是没有集中精力。 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>

Answer 1

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

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

该演示将向您展示一些关键概念，这些概念将帮助您使这些表格同时独立行动。

p.s。请记住始终先从col-xs-*课程开始。 Bootstrap是一个电话第一框架。

哦，因为你是新手，Jfiddle很好，但CodePen更好;）

Bootstrap parallel - 形成allignment

1 个答案: