Html 在井引导3中带有文本的图标

我对使用bootstrap还不熟悉，我正在尝试定制一口井，左边有一个图标，右边有一些文本。在执行此操作时，我希望带有图标的div具有如下绿色背景：

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

以下是html：

.嗯{ 边界半径：5px； 边框：1.5px实心D3D9E3； 盒影：嵌入0 10px 0 rgba185、194、208、0.41； 利润率：30px0； 填充：20px 15px； .好的，文本{ 溢出包装：断开单词； 单词包装：打断单词； } 背景色：白色； .井图标{ 右边距：20px； //背景色：98DDA6； img{ 宽度：100px； } } } .well图形类用于带图标的标注框。

---

我在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文件是否正确，因为你在这里向我们展示的语法不正确。@LazarNikolic我刚做了编辑你使用香草css吗？如果是：嵌套不起作用。您必须手动编写.well.well文本。正如@Emaro所说，您不能嵌套css类定义。您可以在less和scss上执行此操作，但不能在vanila cssI am中使用scss。不是香草的。

.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;
}