(CSS/HTML) 如何在 Bootstrap 中对齐？（左文字右图网格）

Question

我正在寻求帮助.. 我如何使用网格系统在 Bootstrap 中制作这个盒子？ The Box 像这样左居中文本和右图像？第二个问题是..当浏览器的尺寸较小时，我怎样才能使图像进入背景..就像在图像上一样 Image in background

示例：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 Developer Network。

.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

您几乎可以检查任何 bootstrap 网站并找到 html 布局。您还应该阅读 bootstrap documentation，它解释了网格系统的工作原理以及如何正确使用它。

<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 example

(CSS/HTML) 如何在 Bootstrap 中对齐？（左文字右图网格）

(CSS/HTML) How can i make this alignment in Bootstrap? (Left Text right image Grid)

html

css

twitter-bootstrap

box

(CSS/HTML) 如何在 Bootstrap 中对齐？ （左文字右图网格）

(CSS/HTML) How can i make this alignment in Bootstrap? (Left Text right image Grid)

html

css

twitter-bootstrap

box

(CSS/HTML) 如何在 Bootstrap 中对齐？（左文字右图网格）