如何调整Bootstrap页脚中指定列的宽度？

你当前的CSS选择器.footer-top-box会匹配所有带有该类的元素，导致两列宽度同时被修改。要实现差异化调整，推荐以下两种方案：

方案1：利用Bootstrap网格系统调整列宽（优先推荐） #

Bootstrap 4采用12列网格布局，你原本的两列都使用col-lg-6（各占50%宽度）。直接修改列的类名即可实现宽度分配，无需额外CSS：

• 将text-6所在列改为col-lg-8（占约66.7%宽度）
• 将text-22所在列改为col-lg-4（占约33.3%宽度）

修改后的HTML代码：

<div class="container">
    <div class="row">

        <div class="col-lg-8">
            <div class="footer-top-box wow fadeInUp">
                <section id="text-6" class="widget widget_text">
                    <div class="textwidget">
                        <p>
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1630.9930663068005!2d33.3123738581399!3d35.15696659507997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14de1a431c0b1493%3A0x552d685f196ffa7c!2zzpnOkc6kzqHOmc6azp8gzprOlc6dzqTOoc6fICLOnyDOkc6gzp_Oo86kzp_Om86fzqMgzpvOn86lzprOkc6jIg!5e0!3m2!1sen!2s!4v1525094860862"  frameborder="0" style="border:0" allowfullscreen/>
                        </p>
                    </div>
                </section>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="footer-top-box wow fadeInUp">
                <section id="text-22" class="widget widget_text">
                    <h4 class="widget-title">Πολιτικές</h4>
                    <div class="textwidget">
                        <p>
                            <font color="#FFFFFF">
                            </p>
                            <ol>
                                <li>
                                    <a href="https://apostolosloukas.org/privacy-policy/">
                                        <font color="#FFFFFF">Πολιτική Απορρήτου</font>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://apostolosloukas.org/cookie-policy/">
                                        <font color="#FFFFFF">Πολιτική Cookies</font>
                                    </a>
                                </li>
                            </ol>
                            <p>
                            </font>
                        </p>
                    </div>
                </section>
            </div>
        </div>

    </div>
</div>

你可以根据需求调整数字（比如col-lg-7和col-lg-5），只要两个数字之和为12，就能保证列在同一行显示。

方案2：用精准CSS选择器单独控制 #

如果无法修改HTML结构，可使用更具体的选择器定位目标元素：

/* 增大text-6所在容器宽度 */
#text-6.widget_text .footer-top-box {
    width: 70%;
}

/* 减小text-22所在容器宽度 */
#text-22.widget_text .footer-top-box {
    width: 30%;
}

或者通过父级列元素定位：

.row > div:first-child .footer-top-box {
    width: 120%;
}

.row > div:last-child .footer-top-box {
    width: 80%;
}

注意：这种方法可能破坏Bootstrap的响应式布局，仅在无法修改HTML时使用。

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