html - Bootstrap 3 中带有文本的图标

Question

我刚开始使用 Bootstrap ，我正在尝试使用左侧的图标和右侧的一些文本来自定义井。这样做时，我希望带有图标的 div 具有如下绿色背景:

我已经能够得到这个但是图标 div 上的绿色背景没有覆盖整个区域，可能是由于一些填充问题。有人可以用一个例子来证明这一点吗？到目前为止我已经知道了:

这是 html:

.well {
  border-radius: 5px;
  border: 1.5px solid #D3D9E3;
  box-shadow: inset 0 0 10px 0 rgba(185, 194, 208, 0.41);
  margin: 30px 0;
  padding: 20px 15px;
  .well-text {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  background-color: white;
  .well-icon {
    margin-right: 20px;
    //background-color: #98DDA6;
    img {
      width: 100px;
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-sm-10 col-sm-offset-1">
    <div class="well well-graphic">
      <div class="well-icon hide-xs col-sm-2">
        <svg class="icon icon-magnifying-glass-search">
                 <use xlink:href="../assets/img/icons/symbol-defs.svg#icon-magnifying-glass-search"></use>
                    </svg>
      </div>
      <div class="col-sm-10">
        <div class="well-text well-color">
          <p>The .well-graphic class is used for Callout Boxes w/ icon.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

提前致谢。

Answer 1

我对 html 和 css 文件做了一些修改。由于我没有图片，您可能需要更改一些边距。但背景对我有好处，我希望对你也有好处 ;-)

HTML 文件:

<div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="well well-graphic row">
                    <div class="well-icon hide-xs col-sm-2">
                        <svg class="icon icon-magnifying-glass-search">
                            <use xlink:href="../assets/img/icons/symbol-defs.svg#icon-magnifying-glass-search"></use>
                        </svg>
                    </div>
                    <div class="col-sm-10">
                        <div class="well-text well-color">
                            <p>The .well-graphic class is used for Callout Boxes w/ icon.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS 文件:

.well {
  border-radius: 5px;
  border: 1.5px solid #d3d9e3;
  box-shadow: inset 0 0 10px 0 rgba(185, 194, 208, 0.41);
  margin: 30px 0;
  padding: 0px;
}
.well-text {
  overflow-wrap: break-word;
  word-wrap: break-word;
  text-align: center;
  margin-top: 50px;
}
.well {
  margin: 15px 0;
  background-color: white;
  border: 1.5px solid #d3d9e3;
}
.well-icon {
  background-color: #98dda6;
}