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

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

将top和left属性添加到蒙版中。

然后，删除width属性，并从右边添加15px边距（right: 15px），因为bootstrap容器的装订线是15px。

你走了。

.mask {
  position: absolute;
  background-color: rgba(102,102,102,0.5);
  height: 100%;
  min-height: 150px;
  z-index: 9999;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  top: 0;
  left: 0;
  right: 15px;
}
.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>