如何让我的面膜不会溢出面板？

Question

我想把我的装载面具放在面板上.下面的示例不能按预期工作,掩模溢出面板主体.如何使面罩宽度为面板主体的100%.

.mask {
  position: absolute;
  background-color: rgba(102, 102, 102, 0.5);
  width: 100%;
  height: 100%;
  min-height: 150px;
  z-index: 9999;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.mask .loading {
  margin: 0 auto;
  display: block;
  background-color: #666666;
  color: #ffffff;
  width: 100px;
  height: 100px;
  padding-top: 20px;
  padding-left: 22px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-10 col-lg-offset-1">
    <h2>Panel Mask</h2>
  </div>
</div>
<div class="row">
  <div class="col-lg-10 col-lg-offset-1">
    <div class="panel panel-default" style="box-sizing: border-box;">
      <div class="panel-body">
        <div class="mask">
          <span class="loading">
            <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>Loading...
          </span>
        </div>
        <form class="form-horizontal">
          <fieldset>
            <div class="form-group">
              <label class="col-md-3 control-label" for="username">??</label>
              <div class="col-md-4">
                <input name="username" id="username" class="form-control input-md">
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-3 control-label" for="description">??</label>
              <div class="col-md-8">
                <textarea class="form-control" id="description" name="description"></textarea>
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-3 control-label"></label>
              <div class="col-md-8">
                <button type="button" class="btn btn-default" (click)="save()">Update</button>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

将顶部和左侧属性添加到您的蒙版中。

\n\n

然后，删除 width 属性，并从右侧添加 15px 的边距 ( right: 15px)，因为引导容器的装订线是 15px。

\n\n

就这样吧。

\n\n

\r\n

\r\n

.mask {\r\n  position: absolute;\r\n  background-color: rgba(102,102,102,0.5);\r\n  height: 100%;\r\n  min-height: 150px;\r\n  z-index: 9999;\r\n  -webkit-border-radius: 3px;\r\n  -moz-border-radius: 3px;\r\n  border-radius: 3px;\r\n  top: 0;\r\n  left: 0;\r\n  right: 15px;\r\n}\r\n.mask .loading {\r\n  margin: 0 auto;\r\n\tdisplay: block;\r\n\tbackground-color: #666666;\r\n\tcolor: #ffffff;\r\n\twidth: 100px;\r\n\theight: 100px;\r\n\tpadding-top: 20px;\r\n  padding-left: 22px;\r\n  -webkit-border-radius: 3px;\r\n  -moz-border-radius: 3px;\r\n  border-radius: 3px;\r\n}

\r\n

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>\r\n<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>\r\n<div class="row">\r\n<div class="col-lg-10 col-lg-offset-1"><h2>Panel Mask</h2></div>\r\n</div>\r\n<div class="row">\r\n  <div class="col-lg-10 col-lg-offset-1">\r\n    <div class="panel panel-default" style="box-sizing: border-box;">\r\n      <div class="panel-body">\r\n        <div class="mask">\r\n          <span class="loading">\r\n            <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>Loading...\r\n          </span>\r\n        </div>\r\n        <form class="form-horizontal">\r\n          <fieldset>\r\n            <div class="form-group">\r\n              <label class="col-md-3 control-label" for="username">\xe5\x90\x8d\xe7\xa8\xb1</label>\r\n              <div class="col-md-4">\r\n                <input name="username" id="username" class="form-control input-md">\r\n              </div>\r\n            </div>\r\n            <div class="form-group">\r\n              <label class="col-md-3 control-label" for="description">\xe5\x82\x99\xe8\xa8\xbb</label>\r\n              <div class="col-md-8">\r\n                <textarea class="form-control" id="description" name="description"></textarea>\r\n              </div>\r\n            </div>\r\n            <div class="form-group">\r\n              <label class="col-md-3 control-label" ></label>\r\n              <div class="col-md-8">\r\n                <button type="button"  class="btn btn-default" (click)="save()" >Update</button>\r\n              </div>\r\n            </div>\r\n          </fieldset>\r\n        </form>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n