css - 即使列被正确划分，Bootstrap 文本也会重叠在图像上

Question

列宽为 col-lg-5 col-md-3 的文本重叠在 col-lg-5 col-md-3 的图像上。为什么会发生这种情况是我必须在 Bootstrap 中使用 container 标签的强制症，这是 JSfiddle 链接 https://jsfiddle.net/oukdwoot/7/

---

HTML

<header>
    <div class="wrapper">
        <img src="https://placehold.it/84x33">
        <ol class="menu">
            <li><a href="">Contact</a>

            </li>
            <li><a href="">Work</a>

            </li>
            <li><a href="">About</a>

            </li>
            <li><a href="">Journal</a>

            </li>
        </ol>
    </div>
    <div class="main-wrapper">
        <div class="row">
            <div class="col-lg-5 col-sm-3">
                <img src="https://placehold.it/468x307">
            </div>
            <div class="col-lg-5 col-sm-3">
                    <h2>Duis aute irure dolor in henderit in voluptate.</h2>

                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo doconsequat, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur...</p>
            </div>
        </div>
    </div>
</header>

---

CSS

header {
    background: #242424;
    width: 100%;
    height: 126px;
    border-bottom: 4px solid #1e1e1e;
}
header .wrapper img {
    display: inline-block;
    margin-top: 49px;
}
.wrapper {
    width: 70%;
    margin: 0 auto;
    margin-bottom: 8%;
}
.menu {
    display: inline;
}
.menu li {
    display: inline-block;
    list-style: none;
    float: right;
    width: 15%;
    margin: 0;
    padding: 0;
    border-left: 2px solid #1e1e1e;
    padding: 55px 0 50px 0;
    text-align: center;
    vertical-align: center;
    color: white;
    font:bolder 1em Helvetica, arial, serif;
    letter-spacing: 2px;
}
.menu li:first-child {
    border-right: 2px solid #1e1e1e;
}
.menu li a {
    color: white;
    text-decoration: none;
}
.menu li:hover {
    border-bottom: 4px solid #58C93A;
    color: #58C93A;
    background: #262626;
}
.main-wrapper {
    width: 70%;
    margin: 0 auto;
}

Answer 1

您可能需要使用 img-responsive 类。只是图像溢出到 Bootstrap DIV 之外，这是图像 CSS 中的正常行为。

<div class="main-wrapper">
        <div class="row">
            <div class="col-lg-5 col-sm-3">
                <img src="https://placehold.it/468x307" class="img-responsive">

另外，它使您的图像...具有响应性。