Bootstrap调整大小问题

Question

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

我的页面布局方式如下：

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

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

从我的理解中，我应该能够通过以下方式实现这一目标：

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

但是上面根本没有工作。

任何想法，请帮助

Answer 1

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

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

如果您还没有阅读有关设备尺寸的信息，可以here进行操作。您还可以为每个div添加多个网格类，并根据大小控制布局。

示例

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

以上内容会在xs设备上并排显示2列，但会堆叠在sm设备上。

Answer 2

您应该使用内联表单

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

</form>

Answer 3

尝试使用类的组合：

喜欢.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6