嘿，我来帮你搞定这两个Bootstrap布局问题！

问题1：让col-6中的文本居中，是否需要包裹在row中？ #

首先得明确：Bootstrap的网格系统必须遵循「container → row → col」的层级结构！你现在直接在container-fluid下嵌套col-md-6是不符合规范的，会导致默认的内边距、外边距冲突，布局容易乱。所以第一步必须把两个col-md-6放进一个row容器里。

至于文本居中：

• 如果想让col内部的所有内容（图片、标题、文本）都居中，直接给col加text-center类就够了，不需要额外嵌套其他容器。
• 要是只想让某一段文本居中，而非整个col的内容，那给那段文本单独加text-center类，或者用<div class="text-center">把文本包起来就行。

修正后的基础结构代码：

<div class="container-fluid">
  <div class="row"> <!-- 必须添加的row容器 -->
    <div class="col-md-6 ser-first-grid text-center">
      <img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" />
      <p>需要居中的文本内容</p>
    </div>
    <div class="col-md-6 ser-first-grid text-center">
      <h3>PRO...的内容</h3>
    </div>
  </div>
</div>

问题2：屏幕尺寸较小时，让图片和文本始终处于底部 #

这个需求用Bootstrap内置的flex布局工具类就能轻松实现，不用写额外的CSS。这里给你两种靠谱的方案：

方案1：让row的子元素整体底部对齐 #

给父级row添加align-items-end（让子元素垂直对齐到底部）和min-vh-100（让row占满整个视口高度，确保底部效果在小屏幕上也明显）类：

<div class="container-fluid">
  <div class="row align-items-end min-vh-100">
    <div class="col-md-6 ser-first-grid text-center">
      <img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" class="img-fluid" /> <!-- img-fluid让图片自适应屏幕 -->
      <p>底部展示的文本</p>
    </div>
    <div class="col-md-6 ser-first-grid text-center">
      <h3>PRO...的内容</h3>
      <p>更多底部内容</p>
    </div>
  </div>
</div>

如果只想在小屏幕（md以下）生效，把align-items-end换成align-items-sm-end这类响应式类就行；要是希望所有屏幕都保持底部对齐，直接用align-items-end就好。

方案2：让单个内容块自动顶到底部 #

要是父容器不需要占满视口高度，只是想让col内部的内容在容器里底部对齐，可以给内容容器加mt-auto类（自动设置上边距，把内容推到底部），同时给col加d-flex flex-column让它变成flex容器：

<div class="container-fluid">
  <div class="row" style="min-height: 300px;"> <!-- 给row设置最小高度，确保有足够空间展示底部效果 -->
    <div class="col-md-6 ser-first-grid d-flex flex-column">
      <div class="mt-auto text-center"> <!-- mt-auto是关键，自动推到底部 -->
        <img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" class="img-fluid" />
        <p>底部文本</p>
      </div>
    </div>
    <div class="col-md-6 ser-first-grid d-flex flex-column">
      <div class="mt-auto text-center">
        <h3>PRO...的内容</h3>
      </div>
    </div>
  </div>
</div>

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