html - 使用 Bootstrap less 获取容器宽度的百分比

Question

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

特别是，我想要 .modal-75p 类，它将我的模式宽度设置为当前容器宽度的 75%。

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

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

可以吗？

Answer 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));

因此使用下面显示的更少代码以获得更好的结果:

    @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;
        }
}