Question

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

特别是，我想上课.modal-75p，它会将我的模态宽度设置为当前容器宽度的75％。

我知道Bootstrap LESS文件包含@ container-lg，@ container-md等变量，但是我想在当前容器中构建我的LESS mixin，无论它使用哪个变量。

所以如果容器目前是1170px，我会得到它的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));

因此，请使用下面的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;
        }
}

使用Bootstrap获得容器宽度的百分比

1 个答案: