Question

我不是bootstrap 3网格系统的新手，但之前只在移动设备上使用堆叠列。

今天我需要一个移动单列的网格，占据整个宽度（没有滚动条）。在较大的设备上，列应该居中（偏移？），同时保持适当的宽度。

我该怎么做？

到目前为止，我已尝试过以下内容：

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-3">
... content ...
        </div>
    </div>
</div>

这在桌面和移动设备上看起来很好，但后来我意识到我在移动设备上有滚动条。

是否可以围绕html（此处未显示）？或者它与此代码有关？

提前致谢。

Answer 1

这是两个解决方案。

第一种解决方案将列的最大宽度设置为固定的像素数（在本例中为650px）;

第二种解决方案将列的最大宽度设置为窗口的某个百分比，直到达到断点并将其设置为100％。

解决方案1（全屏运行并更改窗口宽度以查看其运行情况）：

.constrain {
  max-width: 650px;
  margin-right: auto;
  margin-left: auto;
}

<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="constrain">
    <div class="row">
      <div class="col-md-12" style="background-color: coral;">
        Content
      </div>
    </div>
  </div>
</div>

解决方案2（全屏运行并更改窗口宽度以查看其运行情况）：

.constrain {
  max-width: 50%;
  margin-right: auto;
  margin-left: auto;
}

@media only screen and (max-width: 650px) {
  .constrain {
    max-width: 100%;
  }
}

<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="constrain">
    <div class="row">
      <div class="col-md-12" style="background-color: coral;">
        Content
      </div>
    </div>
  </div>
</div>

如何仅在桌面

1 个答案: