为什么我的 Bootstrap 布局比它的容器窄？答案

【问题标题】：Why is my Bootstrap layout narrower than its container?为什么我的 Bootstrap 布局比它的容器窄？
【发布时间】：2021-12-25 04:01:45
【问题描述】：

我的 javascript 代码有问题，因为有一个 innerHTML，它给我的宽度与我的 css 和引导规则中的宽度不同。

这是我的 javascript 代码：

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']);
// }
// codigo acima funciona, entender Promise e then para criar let 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 = { // fonte: geniusbrasil na pasta
    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,  // falta verificar esse valor
//  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('Estimated streams number cannot be blank.')
    }
}

最终结果应该是这样的：

但是这就是正在发生的事情

我将把实现此应用程序的页面留给您，

https://fwdmusic.com/royalties-calculator/

非常感谢您的帮助。

非常感谢。

【问题讨论】：

问题并不像你暗示的那样。您将输出转储到 Bootstrap 宽度为 4 的列中，这自然是容器宽度的 33.33%。使用浏览器的文档检查器查看结构并对类进行更正。
另外，您的行直接嵌套在行内，这是无效的引导结构。
你推荐使用卡片而不是行吗？找不到js生成的类
对不起，我指的是列。你认为我可以如何解决这个问题？
哪个最适合您的设计。这完全取决于您。

标签： javascript html css bootstrap-4 innerhtml

【解决方案1】：

这与您的 JS 生成的 HTML 无关。这是关于你在.form-group上面设置的课程。

将黄色标记的 HTML 类从 col-lg-4 offset-lg-4 col-md-4 offset-md-4 更改为 col-md-12。

更新：找到更好的解决方案。我看到你连续 2 次使用 row no-gutter 类。如图所示删除第一个类row no-gutter，你会很好。另外，不要实施我以前的解决方案，因为这会将您的表单宽度破坏为全宽。

【讨论】：

col-lg-12 类将是多余的。这就是为什么最好按照 Bootstrap 的意图列出“移动优先”类。只需使用col-md-12。