引导调整大小问题

Question

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

我的页面布局如下：

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

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

从我的理解来看，我应该能够通过做一些以下的事情来实现这个目标：

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

但上面一点也没起作用。

有什么想法，请帮忙

Answer 1

600个像素属于xs device类别。只需将布局更改为：

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设备上，但将被堆叠在一个sm设备上。

Answer 2

您应该使用内联表单。

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

</form>

Answer 3

尝试使用类的组合：

就像.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6