javascript - 自定义现有的 Twitter 引导模式样式

Question

所以我对 CSS 还很陌生。我知道有一些继承，但除了字体之外，我并不总是确定它适用于何处。所以我想做的是修改 twitter bootstrap 模态类。目前正在显示这些类的主干 View :

modal hide fade

我想做的是扩展模态视图的宽度和高度，但保持所有其他模态 CSS 属性不变。有没有办法做到这一点？在我自己的元素的 local.less 文件中，我首先尝试做我用谷歌搜索的 How can I change the default width of a Twitter Bootstrap modal box?

但我的 View 不再是模态的。它没有居中，也没有黑暗的背景。所以我想我可以将 .modal 类从 twitter bootstrap 复制到我的 local.less 文件中，然后更改宽度/高度。所以我尝试了这个:

.modal-width-half (@modalWidth: 50%) {
  top: 50%;
  left: 50%;
  z-index: 1050;
  overflow: auto;
  width: @modalWidth;
  margin: -250px 0 0 -@modalWidth / 2;
  background-color: white;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999999;
  /* IE6-7 */

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}

同样，样式不是模态的。有什么我遗漏或做错了吗？谢谢。

Answer 1

我刚刚做了这个，可以分享你错过的那一行。

在我更改模式宽度的 promise 中，我必须更改 width 属性以及 margin-left property .通过更改这两项，您将保持表单居中。

.modal {
  width: @modalWidth;
  margin-left: -@modalWidth / 2;
}

当然这将应用于您网站上的所有模态，如果您只想将它​​应用于一个模态，那么您可以自定义类名，例如

.my-modal { 
  width: @modalWidth; 
  margin-left: -@modalWidth / 2; 
}

然后您可以在您的 html 中引用它，例如:

<div class="modal fade open my-modal">...</div>

只需确保 .my-modal 的定义在 less/css 文件中位于 .modal 之后，否则该定义将被覆盖通过 Bootstrap 风格。