使用 Bootstrap less 获取容器宽度的百分比答案

【问题标题】：Getting percentage of container width with Bootstrap less使用 Bootstrap less 获取容器宽度的百分比
【发布时间】：2014-04-02 02:04:10
【问题描述】：

我使用 Bootstrap 3.x 进行响应式设计，我想在模态对话框方面发挥一些作用。

特别是，我希望有一个 .modal-75p 类，它将我的模态宽度设置为当前容器宽度的 75%。

我知道 Bootstrap LESS 文件有 @container-lg、@container-md 等变量，但我想针对当前容器构建我的 LESS mixin，无论它使用哪个变量作为回报。

因此，如果容器当前为 1170 像素，我将得到 3/4 = 878 像素。如果它下降到 970px，我会得到 728px，等等。

可以吗？

【问题讨论】：

标签： html css twitter-bootstrap less

【解决方案1】：

您可以使用媒体查询和 Bootstrap 的 Less 变量来解决这个问题。

先看看modals.less：

// Scale up the modal
@media (min-width: @screen-sm-min) {
  // Automatically set modal's width for larger viewports
  .modal-dialog {
    width: @modal-md;
    margin: 30px auto;
  }
  .modal-content {
    .box-shadow(0 5px 15px rgba(0,0,0,.5));
  }

  // Modal sizes
  .modal-sm { width: @modal-sm; }
}

@media (min-width: @screen-md-min) {
  .modal-lg { width: @modal-lg; }
}

上面的变量是在 variables.less 中定义的，默认情况下：

@modal-lg:                    900px;
@modal-md:                    600px;
@modal-sm:                    300px;

现在你可以重新声明（在 bootstrap.less 中导入 modals.less 后声明）上面提到的变量，编写新的媒体查询并重新编译 bootstrap：

    @modal-lg: (@screen-lg - @grid-gutter-width)*0.75px;
    @modal-md: (@screen-md - @grid-gutter-width)*0.75px;
    @modal-sm: (@screen-sm - @grid-gutter-width)*0.75px;

.modal-dialog {
        width: 75%;
        @media (min-width: @screen-sm-min) {
        width: @modal-sm;
        }
        @media (min-width: @screen-md-min) {
        width: @modal-md;
        }
        @media (min-width: @screen-lg-min) {
        width: @modal-lg;


  }
}

上面将编译成（CSS）：

.modal-dialog {
  width: 75%;
}
@media (min-width: 768px) {
  .modal-dialog {
    width: 553.5px;
  }
}
@media (min-width: 992px) {
  .modal-dialog {
    width: 721.5px;
  }
}
@media (min-width: 1200px) {
  .modal-dialog {
    width: 877.5px;
  }

}

更新

再次阅读您的问题后。 @container-sm 未定义为 @screen-sm - @grid-gutter-width 但：

 ((720px + @grid-gutter-width));

所以使用下面显示的 Less 代码以获得更好的结果：

    @modal-lg: @container-lg * 0.75px;
    @modal-md: @container-md * 0.75px;
    @modal-sm: @container-sm * 0.75px;

.modal-dialog {
        width: 75%;
        @media (min-width: @screen-sm-min) {
        width: @modal-sm;
        }
        @media (min-width: @screen-md-min) {
        width: @modal-md;
        }
        @media (min-width: @screen-lg-min) {
        width: @modal-lg;
        }
}

【讨论】：