(CSS/HTML) 如何在 Bootstrap 中進行這種對齊？ （左文字右圖網格）

Question

我正在尋求幫助 .. 如何在 Bootstrap 中使用 Gridsystem 制作此框？ 框左居中的文本和右圖像是這樣的？ 第二個問題是..當瀏覽器的大小較小時，如何使圖像轉到背景..就像背景中的圖像圖像

示例：gumpyframework 嘗試過：

 <div class="row text-center"> <h2>Team</h2> <hr class="small"> <div class="row"> <div class="col-md-8"> <p>Test Text</p> </div> <div class="col-md-6"><img src="img/test.png" id="africaPhoto" alt="Smiley face" width="80%"> </div> </div> </div>

Answer 1

嘗試將圖像設置為整個部分的background-image以正確顯示圖像。 您可以使用background-position屬性四處移動圖像。 有關更多信息，請參閱Mozilla 開發人員網絡。

 .section { background-color: red; background-image: url('http://i.imgur.com/gowMz8A.jpg'); background-position: right center; background-size: 30%; background-repeat: no-repeat; min-height: 300px; } .wrapper { max-width: 70%; margin: 0 auto; padding: 30px 0; } .text { width: 50%; }

 <section class="section"> <div class="wrapper"> <div class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum modi tenetur incidunt eveniet? Ut nesciunt ipsum, nulla nobis mollitia nemo tempora, architecto aliquid voluptatem vero maxime! Dolorem dolore natus delectus. </div> </div> </section>

Answer 2

您幾乎可以檢查任何引導程序網站並找到該 html 布局。 您還應該閱讀引導程序文檔，它解釋了網格系統如何工作以及如何正確利用它。

<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
  <div class="banner-text">
    <h1 class="text-info">
    Become a Surgeon!
    </h1>
    <p>Digital Surgeons is looking for an experienced web developer ....</p>
    <button class="btn btn-info">
    Apply Now
    </button>
  </div>
</div>
<div class="col-sm-4"><img class="hidden-xs" src="http://placehold.it/500x500" id="africaPhoto" alt="Smiley face" >                    </div>
</div>
</div>

要回答您的第二個問題，您可以使用 hidden-xs 或 hidden-sm 類在較小的屏幕尺寸上隱藏圖像，同樣您也可以使用visible-xs 僅在特定屏幕尺寸上顯示元素您也可以使用自定義類例如這樣的媒體查詢：

@media (max-width: 768px) {
  body {
    background-image:url('http://placehold.it/500x500');
  }
}

JSFiddle 示例