Bootstrap3 滑块图像与透明框相交 - 需要向下移动

Question

我正在使用 bootstrap3 创建我的页面。我创建了一个带有图像的滑块，并在滑块图像内部创建了一个 <div>，其中包含一些内容，其中包含白色透明背景。我的代码如下：

<div class="header-banner">
    <div class="flexslider header-slider hidden-xs col-sm-3">
        <ul class="slides">
            <li>
                <img src="img/transparent.png" alt="">
                <div data-image="img/content/Slide_Intro_1.png"></div>
                <div class="slider-caption container">
                    <div class="row">
                        <div class="slider-caption container">
                            <div class="col-xs-10 col-sm-5" style="background: rgba(255, 255, 255, 0.4 );">
                                <h3 class="mb-7px" style="margin:0 0 0 20px ;padding:10px 0 0 0;">Lorem ipsum</h3>
                                <p class="mid-dle-font-size mb-5px" style="margin:0 0 0 20px ;padding:10px 0 0 0;">Lorem ipsum Lorem ipsum </p>
                                <a href="#" class="btn btn-red" style="margin:0 0 0 20px ;">Know More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div>
        </div>

但是我创建的透明框与滑块图像的顶部相交。我需要那个盒子再往下一点，这样它就不会在滑块的顶部相交。请检查图片如下：

我用红色标记它。我需要将该框向下移动一点，比如 40px 向下。我通过给出 style="padding:40px 0 0 0"; 来尝试，但是对齐方式正在改变，响应能力也在改变。怎么做才能不影响透明框的left和right位置。任何帮助将不胜感激。

Answer 1

<div class="slider-caption container">
                    <div class="row">
                        <div class="slider-caption container" style="margin-top: 40px;">
                            <div class="col-xs-10 col-sm-5" style="background: rgba(255, 255, 255, 0.4 );">
                                <h3 class="mb-7px" style="margin:0 0 0 20px ;padding:10px 0 0 0;">Lorem ipsum</h3>

需要包含 style="margin-top: 40px;" 它有效。谢谢大家

Answer 2

为此你必须使用 margin。

margin-top: 40px;

我稍微解释一下。见下图。

Explanation of the different parts:

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent

Source: W3Schools: CSS Box model

您尝试添加 padding，但仅将内容移至下方。那是因为 background-color 适用于 padding 和 content。结果将是框位于顶部的相同位置，内容向下移动 40px 增加元素高度。

但是 margin 在 HTML 元素之外，因此它将整个框向下移动。所以它不会影响元素的高度。由于 margin 在元素之外，因此 background-color 不会影响它。

Bootstrap3 滑块图像与透明框相交 - 需要向下移动

Bootstrap3 slider image is got intersect with transparent box - need to move down

html

css

twitter-bootstrap-3