Question

我正在定制一个引导程序主题，我遇到了一个可能很容易解决的问题。

我有一个像这样的数据块：

                    <!-- Data block -->
                    <article class="span4 data-block">
                        <div class="data-container">

                            <section>
                                <img src="photo.jpg" width="350" height="350">
                            </section>
                            <section>
                                <p>Some writing below here</p>
                            </section>
                        </div>
                    </article>
                    <!-- /Data block -->

这部分我的CSS是：

.data-block .data-container {
  padding: 23px 23px 3px 23px;
  background-color: #ffffff;
  border: 1px solid #bec2c8;
  *zoom: 1;
  -webkit-border-radius: 2px 2px 0 0;
  -moz-border-radius: 2px 2px 0 0;
  border-radius: 2px 2px 0 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.15), 0 4px 0 -3px #fff, 0 4px 0 -2px #bec2c8, 0 8px 0 -5px #fff, 0 8px 0 -4px #bec2c8;
  -moz-box-shadow: 0 0 3px rgba(0,0,0,0.15), 0 4px 0 -3px #fff, 0 4px 0 -2px #bec2c8, 0 8px 0 -5px #fff, 0 8px 0 -4px #bec2c8;
  box-shadow: 0 0 3px rgba(0,0,0,0.15), 0 4px 0 -3px #fff, 0 4px 0 -2px #bec2c8, 0 8px 0 -5px #fff, 0 8px 0 -4px #bec2c8;
}

由于：

padding: 23px 23px 3px 23px;

我的图像周围有空格。我想为网站上的所有其他数据块div保留相同的填充，但是在这一个数据块上只有没有填充（以便图像显示完全没有填充div）。

我试过了：

<div class="data-container nopadding">

然后在CSS中添加了一个带有0px填充的附加类，但是这对于覆盖不起作用。我确信那是我做错事的地方。

有人可以引导我朝着正确的方向前进吗？非常感谢你:)）

Answer 1

您可以尝试使用.data-container.nopadding作为CSS选择器而不仅仅是.nopadding，并且您也可以在填充后指定！important：0如果以上操作不起作用则强制执行此操作。

如何在bootstrap中覆盖单个div的填充？

1 个答案: