Question

我正在使用Bootstrap 4.4.1

我尝试创建2列布局：图像在左侧，文本在右侧。

<section class="resume-section-first p-3 p-lg-5 d-flex align-items-center" id="about">

        <div class="w-100">
            <div class="block">
                <div class="row">
                    <div class="w-50">
                        <div class="span4">
                            <img class="img-left w-100" src="/img/profile-lg.jpg"/>
                        </div>
                    </div>
                    <div class="w-50 p-5">
                        <div class="span4">
                            <div class="content">
                                <div class="content-heading">
                                    <span>Software Engineer</span>
                                    <h2>Test Title</h2><br>
                                </div>
                                <p>
                                    Experienced Software Engineer in developing Web Application, as well as building robust RESTful API.
                                    Expert in System Architecture Design, Development and Maintenance of Software systems.
                                    Equipped with a diverse and promising skill-set required in the market.
                                    Proficient in various platforms and languages. Able to effectively self-manage during independent
                                    projects, as well as collaborate as part of productive team.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

在大屏幕上，以上代码以2列显示。但是在小屏幕上，我想显示“图像和文本的完整列”。我尝试使用w-md-100或w-xs-100，但无法正常工作。

如何解决此问题？

Answer 1

为什么不使用网格布局类：col-sm-*，col-md-* ...您的问题是此的理想用例。这些列将占据小屏幕上的所有12列，并且在尺寸大于等于768像素的情况下，它将占据（12列）中的6列，即50％的宽度； more info here

工作片段如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<section class="resume-section-first p-3 p-lg-5 d-flex align-items-center" id="about">

  <div class="w-100">
    <div class="block">
      <div class="row">
        <div class="col-sm-12 col-md-6">
          <div class="span4">
            <img class="img-left w-100" src="https://www.akberiqbal.com/Jumbo.jpg" />
          </div>
        </div>
        <div class="col-sm-12 col-md-6">
          <div class="span4">
            <div class="content">
              <div class="content-heading">
                <span>Updated</span>
                <h2>Test Title</h2><br>
              </div>
              <p>
                Experienced Software Engineer in developing Web Application, as well as building robust RESTful API. Expert in System Architecture Design, Development and Maintenance of Software systems. Equipped with a diverse and promising skill-set required in the
                market. Proficient in various platforms and languages. Able to effectively self-manage during independent projects, as well as collaborate as part of productive team.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap4.4：使两列网格响应

1 个答案: