Question

我正在尝试创建一个具有固定宽度的登录页面，同时在页面中心有列。像页面一样：

https://www.amazon.com/sign-in

我尝试使用像这样的偏移colms

<div class="col-md-4 col-md-offset-4" style=" float: none; margin: 0 auto;">

这种方式不一致。

Answer 1

由于Bootstrap的列设计为使用宽度百分比，因此无法使用Bootstrap的组件执行此操作。因此，它们将根据视口大小更改大小。你必须编写一些自定义的css代码来执行此操作。

您可以使用以下代码段来执行您想要的操作。它使用CSS媒体查询（这是Bootstrap使用的）。我将div设置为宽度600px。当您将窗口大小调整为小于768px时，它将更改为100%宽度。我选择了768px，因为那是Bootstrap中xs的断点。

.col-fixed {
  margin: 0 auto;
  background-color: red;
}
@media (min-width: 768px) {
  .col-fixed {
    width: 600px;
  }
}

<div class="col-fixed">
  This is a fixed width column that becomes 100% when viewport is less than 768px
</div>

Answer 2

如果它是固定宽度的DIV，您就不需要Bootstrap的网格。你这样做：

this.GlobalAgGridOptions = {
  headerHeight: 42,
  rowHeight: 42
}

this.myAgGridOptionsOne = {
    rowData: rowDataOne,
    columnDefs: columnDefsOne
}

this.myAgGridOptionsTwo = {
    rowData: rowDataTwo,
    columnDefs: columnDefsTwo
}

angular.extends(this.mygridOptionsOne, this.GlobalOptions);
angular.extends(this.mygridOptionsTwo, this.GlobalOptions);

Bootstrap响应固定宽度col，始终居中

2 个答案: