Question

我有一个使用Bootstrap 3的ASP.NET MVC 5项目。我使用原生VS 2015工具自动生成我的视图，如下所示：

<div class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-md-2">Label1</label>
        <div class="col-md-10">
            Text1
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-2">Label2</label>
        <div class="col-md-10">
            Text2
        </div>
    </div>
</div>

我正在努力实现以下目标：

获取表单以使用两列。我相信我所要做的就是使用col-md-x，只要x总和为12
将标签放在输入上方的方式与我缩小浏览器宽度时显示的方式相同

以下是浏览器最大化时的外观：

Label1          Text1
Label2          Text2

无论视口宽度如何，我希望它们看起来像这样：

Label1                Label2
Text1                 Text2

Label3                Label4
Text3                 Text4

更新

使用回答者的例子，我能够实现我想要的

<div class="container">
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label">Label1</label>
            <div>
                Text1
            </div>
        </div>

        <div class="form-group">
            <label class="control-label">Label2</label>
            <div>
                Text2
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label">Label3</label>
            <div>
                Text3
            </div>
        </div>

        <div class="form-group">
            <label class="control-label">Label4</label>
            <div>
                Text4
            </div>
        </div>
    </div>
</div>

Answer 1

你使你的标记变得更加复杂。您根本不需要设置form-horizontal，只需使用form标记替换该div。并删除col-md- *类，因此它们将适合视口的整个宽度。您可以将class="well"定义为form，以使其看起来很漂亮。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <form>
      <div class="col-xs-6">
        <div class="form-group">
          <label class="control-label">Label1</label>
          <div>
            Text1
          </div>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="form-group">
          <label class="control-label">Label2</label>
          <div>
            Text2
          </div>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="form-group">
          <label class="control-label">Label3</label>
          <div>
            Text3
          </div>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="form-group">
          <label class="control-label">Label4</label>
          <div>
            Text4
          </div>
        </div>
      </div>
  </form>
 </div>
</div>

＆＃13;

在输入上方有两个/多个列和标签的表单

1 个答案: