Question

我有以下Bootstrap 3.2标记。我希望将这个特定的行放入2列6个空格中。以下不起作用（它显示在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-*类适用于宽度等于或大于1200px的显示/窗口/视口。

如果您使用这些的显示或窗口小于此值，则它们会自行换行。

两种解决方案：

1）为每个显示尺寸添加下一个尺寸。这会将其缩放到适当的分辨率。

＆＃13;

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

＆＃13;

<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>

＆＃13;

2）如果你总是希望它是两个，6列的网格，只需使用col-xs-6类，它就可以是任意页面大小的两个6列网格。

＆＃13;

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

＆＃13;

<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>

＆＃13;

除非您在页面缩放时需要将列放在不同的行上，否则我建议选项二。

Bootstrap col-lg-6不使用6列而是整行

1 个答案: