Html 引导调整大小问题

我有一个登录表单，它加载在引导模型中。我使用的是正常大小的模式，而不是大的模式。登录表单的格式应确保左侧有2个输入字段和一个登录按钮，右侧应包含其他登录选项

我的页面布局方式如下所示：

container
  row
    col-sm-6
    col-sm-6

问题是模型的宽度约为600像素，这使得我的登录页面变得“响应”，而不是将col-sm-6放在彼此旁边，而是将它们放在彼此下面

根据我的理解，我应该能够通过以下方式实现这一点：

 @media (min-width: 768px) {
      .container {
        width: 550px;
      }
    }

但以上这些根本不起作用

---

如果您有任何想法，请帮助

您应该使用内嵌表单

<form class="form-inline" role="form">

</form>

---

尝试使用类的组合：

---

像

.col-xs-6、.col-sm-6、.col-md-6、.col-lg-6等

600像素属于

xs设备

类别。您只需将布局更改为：

container
  row
    col-xs-6
    col-xs-6

如果您尚未阅读有关设备大小的信息，可以这样做。还可以向每个div添加多个栅格类，布局将根据大小进行控制

示例

<div class="col-xs-6 col-sm-12">
</div>
<div class="col-xs-6 col-sm-12">
</div>

---

上述内容将在

xs

设备上并排有2列，但将堆叠在

sm

设备上。

这是错误的，除非视口宽度至少为768px，否则不能使用内联表单。哇，我不知道我为什么不试试这个，因为我已经读了无数遍了。尽管如此，谢谢。

.col-xs-6、.col-sm-6、.col-md-6、.col-lg-6

完全等同于

.col-xs-6

，除了不必要的冗长和复杂之外。