Fluid Container内两行布局异常求助：第二行位于容器外

嘿，刚接触HTML和Bootstrap的话遇到这种布局问题很正常，咱们来一步步解决它！你的第二行布局跑到容器外，主要是因为代码里有几个小错误破坏了结构，咱们一个个改：

1. 错误的注释格式 #

你用了Markdown的加粗符号**包裹HTML注释，这在HTML里是不合法的，浏览器会把**当成普通文本渲染，直接打乱了DOM结构，这是导致布局错乱的核心原因！比如你写的**<!-- Mid text (First row heading text)-->**，要把**去掉，直接保留标准的HTML注释格式<!-- 注释内容 -->。

2. CSS选择器和类名错误 #

• 你写的.mid-text .mid-text-heading .mid-text-heading2是错的，因为mid-text-heading2是mid-text的直接子元素，不是mid-text-heading的子元素，应该改成.mid-text .mid-text-heading2才能选中目标元素。
• .mid-image2里的<div class="mid-container2.png">类名带了.png，类名不能包含点号这种特殊字符，改成.mid-image2-text更合理。

修正后的完整代码 #

HTML部分

<!-- Mid text (First row heading text)-->
<div class="container-fluid" style="padding: 0px !important">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="mid-text">
        <div class="mid-text-heading">
          Placeholder Text
        </div>
        <div class="mid-text-heading2">
          <p>Placeholder Text</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Mid image 1 'Responsive (2nd row starts here) -->
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <div class="mid-image1">
        <img class="img-responsive center-block" src="responsive-image-1.png" alt="image1">
        <div class="mid-image1-text">
          Responsive Website
        </div>
        <p>Placeholder Text</p>
      </div>
    </div>
    <!-- Mid image 2 'Responsive' -->
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <div class="mid-image2">
        <img class="img-responsive center-block" src="placeholder-image.png" alt="image2">
        <div class="mid-image2-text">
          Placeholder Text
        </div>
        <p>Placeholder Text</p>
      </div>
    </div>
    <!-- Mid image 3 'Responsive' -->
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <div class="mid-image3">
        <img class="img-responsive center-block" src="mid-container3.png" alt="image3">
        <div class="mid-image3-text">
          Placeholder text
        </div>
        <p>Placeholder Text</p>
      </div>
    </div>
  </div>
</div>

CSS部分

/* Middle Text */
.mid-text {
  width: 100%;
  height: 500px;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 40px;
  background-color: #ffd33d;
}

.mid-text .mid-text-heading {
  margin-top: 0px;
  padding-top: 30px;
  text-align: center;
  color: black;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

.mid-text .mid-text-heading2 {
  margin-top: 0px;
  padding-top: 30px;
  text-align: center;
  color: red;
  font-family: 'Lato', sans-serif;
  font-weight: 100;
}

.mid-image1 {
  width: 100%;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
}

.mid-image1 .mid-image1-text {
  /* 这里可以补充需要的样式 */
}

.mid-image2 {
  width: 100%;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
}

.mid-image2 .mid-image2-text {
  /* 这里可以补充需要的样式 */
}

.mid-image3 {
  width: 100%;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
}

.mid-image3 .mid-image3-text {
  /* 这里可以补充需要的样式 */
}

额外小提示 #

• 如果你用的是Bootstrap 3，col-xs-*是针对超小屏幕的，现在Bootstrap 5已经改成col-*了，不过你如果用的是3版本就没问题。
• 去掉container-fluid的padding:0px !important其实更符合Bootstrap的默认布局逻辑，因为row的负margin本来就是用来抵消容器的内边距的，强行去掉可能导致内容贴边或者溢出。

内容的提问来源于stack exchange，提问作者iyippy