所以我对CSS很陌生。 我知道有一些继承,但是除了字体之外,我并不总是确定它在哪里适用。 所以我想做的是修改twitter bootstrap modal类。 这些类当前显示一个主干视图:

modal hide fade

我想做的是扩展模态视图的宽度和高度,但保持所有其他模态CSS属性不变。 有没有办法做到这一点? 在我自己的项目的local.less文件中,我首先尝试执行谷歌搜索的操作,即如何更改Twitter Bootstrap模式框的默认宽度?

但是我的观点不再是模态。 它没有居中,也没有黑暗的背景。 因此,我以为可以将Twitter引导程序中的.modal类复制到我的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;
}

同样,样式不是模态的。 有什么我想念的东西或做错了吗? 谢谢。

===============>>#1 票数:1 已采纳

我就是这样做的,可以分享您所缺少的内容。

在更改模态宽度的承诺中,我不得不更改width属性以及margin-left属性 通过更改这两个位置,您将使表单居中。

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

当然,这将适用于您网站上的所有模态,如果您只想将其应用于一个模态,则可以自定义类名,例如

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

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

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

只要确保您的less / css文件中.my-modal的定义 .modal 之后 ,否则该定义将被引导样式覆盖。

  ask by Crystal translate from so

未解决问题?本站智能推荐: