为什么我的 Bootstrap 布局比它的容器窄？
Why is my Bootstrap layout narrower than its container?
我在使用 javascript 代码时遇到问题，因为有一个 innerHTML，它给我的宽度与我在 css 和 bootstrap 规则中的宽度不同.
这是我的 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/
非常感谢你的帮助。
非常感谢。
这与您生成的 JS 无关 HTML。这是关于你的 class 你上面设置的 .form-group.
将标记为 HTML class 的黄色从 col-lg-4 offset-lg-4 col-md-4 offset-md-4 更改为 col-md-12。
更新：找到了更好的解决方案。我看到您连续使用 class row no-gutter 2 次。如图所示，删除第一个 class row no-gutter 就可以了。另外，不要实施我以前的解决方案，因为这会使您的表单宽度变为全宽。
我在使用 javascript 代码时遇到问题，因为有一个 innerHTML，它给我的宽度与我在 css 和 bootstrap 规则中的宽度不同.
这是我的 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/
非常感谢你的帮助。
非常感谢。
这与您生成的 JS 无关 HTML。这是关于你的 class 你上面设置的 .form-group.
将标记为 HTML class 的黄色从 col-lg-4 offset-lg-4 col-md-4 offset-md-4 更改为 col-md-12。
更新：找到了更好的解决方案。我看到您连续使用 class row no-gutter 2 次。如图所示，删除第一个 class row no-gutter 就可以了。另外，不要实施我以前的解决方案，因为这会使您的表单宽度变为全宽。