移动

Question

我很难在移动视图中将某些文字集中在我的页面的一部分（使用课程about）。请注意，所有内容都在类container-fluid的div中。此部分还有一个问题，两侧出现了空白区域，并没有填充背景颜色（现在通过在身体上添加颜色来修复，但我想是什么造成的这是相关的）。我希望它能够填满屏幕宽度的80％。

CodePen

HTML（受影响的部分）：

        <section class="about" id="about">
          <div class="row">
            <div class="col">
              <h2>About</h2>
            </div>
          <div class="row">
            <div class="col-md-5">
              <img src="img/circle-portrait-small.png" class="portrait">
            </div>
            <div class="col-md-7">
              <p>.....</p>
            </div>
          </div>
        </section>

CSS：

.about {
  padding: 3em 0;
}

.about p {
  text-align: left;
  width: 80%;  

}

/* Not sure why this is needed */
.about .row {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .about {
    padding: 2em;
  }

  .about p {
    font-size: 15px;
  }

  .portrait {
    height: 250px;
    margin-bottom: 1em;
  }
}

Answer 1

仅在移动设备中将此信息添加到css

.about .row {
    margin: 0px auto;
    display: table;
}
.about p {
    text-align: center;
    width: 100%;
}

Answer 2

随机空间看起来像是由row元素上设置的负边距引起的：

.row {
    margin-right: -15px;
    margin-left: -15px;
}

删除它，你应该失去空间。对于移动中段落的居中，似乎您的p元素已占据其父级的80％，因此要将其居中，只需添加以下内容：

.about p {
    margin:0 auto;
}

从视觉上看，在您的767px断点之后，您的p元素的宽度远远小于其父级的80％，这是因为您在col上设置了填充，{{1 }和about元素。在断点处移除或减少此填充，段落将开始占用您正在寻找的空间。

Answer 3

这是update code

您可以删除不必要的margin或width

Answer 4

标记存在各种问题。

• 第一行标记未正确关闭。
• 关于CSS的额外内容将文本的限制限制为80％;

删除此...

/* Not sure why this is needed */
.about .row {
  width: 100%;
}
.about p {
  text-align: left;
  width: 80%;  
}

https://www.codeply.com/go/fXFvL2644p

如果您要使用Bootstrap网格，请仔细遵循container＆gt; row＆gt; col(s)的相应结构。