为什么我的Bootstrap布局宽度小于容器？innerHTML渲染宽度不符

算力阿峰
2026-9-27
JavaScript innerHTML渲染内容宽度与CSS/Bootstrap规则冲突问题
问题描述

我在编写JavaScript代码时遇到如下问题：通过innerHTML动态渲染的内容宽度，和我预先设置的CSS、Bootstrap规则定义的宽度不一致。
相关代码

let numeroStreams = document.getElementById('num')
let resultado = document.getElementById('res')

// let requestURL = 'https://economia.awesomeapi.com.br/json/all/USD-BRL';
// let request = new XMLHttpRequest();

// request.open('GET', requestURL);
// request.send();
// request.onload = function() {
//  let cotacaoDolar = JSON.parse(request.response);
//  let divisaoReais = parseFloat(cotacaoDolar['USD']['ask']);
// }
// 上方代码可正常运行，后续可基于Promise和then方法定义real变量

let dolar = {
    Spotify: 0.00437,
    Deezer: 0.0064,
    Amazon: 0.00402,
    Apple: 0.00783,
    Ytmusic: 0.008,
    Tidal: 0.01284,
    Yt: 0.00087,
};


let divisaoReais = 5.37;

let real = { // 数据来源：geniusbrasil文件夹
    Spotify: dolar.Spotify*divisaoReais,
    Deezer: dolar.Deezer*divisaoReais,
    Amazon: dolar.Amazon*divisaoReais,
    Apple: dolar.Apple*divisaoReais,
    Ytmusic: dolar.Ytmusic*divisaoReais,
    Tidal: dolar.Tidal*divisaoReais,
    Yt: dolar.Yt*divisaoReais,
};

// let real = {
//  Spotify: 0.00193,
//  Deezer: 0.00195,
//  Amazon: 0.00754,
//  Apple: 0.00546,
//  Ytmusic: 0.006,  // 该数值待验证
//  Tidal: 0.00604,
//  Yt: 0.00045,
// };

function calc() {
    if (numeroStreams.value > 0) {
        res.innerHTML = `<div class="row no-gutters" id="stores-container">
                        <div class="col">
                            <div class="row voffset-md">
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="row platforms-spotify voffset-clear-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/spotify_logo.png" class="img-fluid img-protected logo-cal-style mg-sm float-sm-none" alt="spotify_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-7">
                                            <h2 class="cal-store-style mg-clear">
                                                Spotify
                                            </h2>
                                            <p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Spotify).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="row platforms-deezer voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/deezer-logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="deezer_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-7">
                                            <h2 class="cal-store-style mg-clear">
                                                Deezer
                                            </h2>
                                            <p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Deezer).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="row platform-amazon voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/amazon_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="amazon_music_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center stores-cal-info col-lg-7 col-sm-7 col-7">
                                            <h2 class="mg-clear cal-store-style">
                                                Amazon Music
                                            </h2>
                                            <p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Amazon).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row voffset">
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="row platforms-apple voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/apple_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_music_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-7">
                                            <h2 class="mg-clear cal-store-style">
                                                Apple Music
                                            </h2>
                                            <p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Apple).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="row platforms-ytmusic voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/youtube_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_music_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-6">
                                            <h2 class="mg-clear cal-store-style">
                                                Youtube Music
                                            </h2>
                                            <p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Ytmusic).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="row platforms-tidal voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/tidal_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="tidal_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-7">
                                            <h2 class="cal-store-style mg-clear">
                                                Tidal
                                            </h2>
                                            <p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Tidal).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row voffset">
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="row platforms-soundcloud voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/soundcloud-logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="soundcloud_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-7">
                                            <h2 class="mg-clear cal-store-style">
                                                SoundCloud
                                            </h2>
                                            <p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Soundcloud).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="row platforms-tiktok voffset-sm">
                                        <div class="align-self-center col-lg-5 col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/tiktok_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="tiktok_logo">
                                            </div>
                                        </div>
                                        <div class="align-self-center col-lg-7 col-sm-7 col-7">
                                            <h2 class="cal-store-style mg-clear">
                                                TikTok
                                            </h2>
                                            <p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.TikTok).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <div class="row platforms-youtube voffset-sm">
                                        <div class="col-lg-6 align-self-center col-sm-5 col-5">
                                            <div class="text-md-center text-lg-left">
                                                <img src="https://fwdmusic.com/img/youtube_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_logo">
                                            </div>
                                        </div>
                                        <div class="col-lg-6 align-self-center col-sm-7 col-7">
                                            <h2 class="cal-store-style mg-clear">
                                                Youtube
                                            </h2>
                                            <p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Yt).toFixed(2)}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>`
    } else {
        window.alert('估算播放量不能为空。')
    }
}
效果对比

预期效果：
实际效果：
修复方案

可按以下顺序排查修复：
检查res外层容器的CSS规则，确认是否有max-width、padding、margin等属性覆盖了Bootstrap的栅格规则
检查动态渲染的DOM节点是否有未闭合的标签，标签不完整会导致Bootstrap栅格类不生效
确认Bootstrap样式文件的加载顺序早于自定义CSS和JS代码，避免动态渲染时类对应的样式还未加载
可给#stores-container手动加上width: 100% !important的强制样式，排除父容器宽度限制导致的内容压缩
检查是否有其他JS代码在渲染完成后修改了节点的样式属性
内容的提问来源于stack exchange，提问作者user12220646
为什么我的Bootstrap布局宽度小于容器？innerHTML渲染宽度不符

问题描述 #

相关代码 #

效果对比 #

修复方案 #

问题描述

相关代码

效果对比

修复方案
