引导-lg-6不使用6列，而是使用整行

Question

我有下面的引导3.2标记。我想把这个特定的行到空间分成6个空格的2列。以下内容不起作用(它显示在2行上)，我无法通过阅读网格系统上的3.2文档来判断：

<div class="container">
    <div class="row">
        <div class="col-lg-6">
            @Html.LabelFor(m => m.AppName)
            @Html.TextBoxFor(m => m.AppName)
        </div>
        <div class="col-lg-6">
            @Html.LabelFor(m => m.HarmonyTarget)
            @Html.TextBoxFor(m => m.HarmonyTarget)
        </div>
    </div>

Answer 1

检查您的窗口/视图大小。col-lg-*类用于显示/窗口/视图端口，宽度等于或大于1200 in。

如果您正在使用的dispaly或窗口比此更小，则它们将包装在自己的行上。

有两种解决办法：

1)为每个显示器的大小添加下一个大小。这将把它扩大到适当的决议。

​

.first {
  background-color: blue;
  color: white;
}
.second {
  background-color: orange;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 first">
      Test
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 second">
      Test
    </div>
  </div>

​

2)如果您总是希望它是2，6列网格，只需使用col-xs-6类，它将始终是任意页面大小的2，6列网格。

​

.first {
  background-color: blue;
  color: white;
}
.second {
  background-color: orange;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-6 first">
      Test
    </div>
    <div class="col-xs-6 second">
      Test
    </div>
  </div>

​

除非您需要将列放置在不同的行上作为页面缩放，否则我重新推荐了选项二。