html - CSS/bootstrap 使用内联图像创建列

Question

在 Bootstrap 网格中，如何在内部添加图像并让它创建一个列(或在视觉上模仿它。)我不希望文本环绕顶部或底部。文本应该是全宽的，除非添加了图像然后只有 8 列。

<div class="col-sm-12">

<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
</p>
<img src="test.png"/>
<p>
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
</p>

</div>

Answer 1

好的，这是 flexbox 的一个非常基本的用法。

Codepen here

<div class="container">
  <div class="row flex">
    <div class="col-md-8 center-vertical">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet lectus proin nibh nisl condimentum id venenatis a. Aliquam sem fringilla ut morbi tincidunt augue. Ultrices dui sapien eget mi proin sed libero enim. Erat nam at lectus urna duis. Viverra mauris in aliquam sem fringilla ut morbi. Ornare massa eget egestas purus viverra. Id consectetur purus ut faucibus. Malesuada fames ac turpis egestas maecenas pharetra. Cursus vitae congue mauris rhoncus aenean vel elit scelerisque. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Felis imperdiet proin fermentum leo vel orci. Lobortis mattis aliquam faucibus purus. Sed viverra tellus in hac habitasse platea dictumst.</p>
      <p>Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Nam at lectus urna duis convallis convallis tellus. Tortor condimentum lacinia quis vel eros donec ac odio. Interdum varius sit amet mattis vulputate enim. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Egestas integer eget aliquet nibh. Natoque penatibus et magnis dis. Ut pharetra sit amet aliquam. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Massa tincidunt nunc pulvinar sapien. Ac tincidunt vitae semper quis lectus nulla at volutpat diam. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Massa tempor nec feugiat nisl pretium fusce id.</p>
      <p>Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Facilisis mauris sit amet massa. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Sed velit dignissim sodales ut. Facilisi morbi tempus iaculis urna id volutpat lacus. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Odio aenean sed adipiscing diam donec. Hac habitasse platea dictumst quisque. Magna ac placerat vestibulum lectus. Lobortis feugiat vivamus at augue eget arcu dictum. Mi tempus imperdiet nulla malesuada pellentesque. Aliquet nibh praesent tristique magna sit amet purus. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque. Justo nec ultrices dui sapien eget mi.</p>
    </div>
    <div class="col-md-4 center-vertical">
        <img class="" src="https://placehold.it/250" />
    </div>
  </div>
</div>

CSS:

.flex {display: flex;}
.center-vertical {align-self: center;}

我意识到您的代码可能不适用于上述代码。所以，这是另一个想法，但不确定你能否更接近这个 Codepen .

<div class="container">
  <div class="row">
<div class="col-sm-12 wrapper">
  <div class="main">
    <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
</p>
    <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
</p>
    <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
</p>
  </div>
  <img src="https://placehold.it/200" width="200" height="200" />
</div>
  </div>
</div>

CSS:

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  text-align: center;
}
.main {text-align: left;}
.main    { flex: 3; }
img { order: 99;align-self:center; }

希望其中一个示例可以根据您的需要进行修改。