Twitter Bootstrap：無法使網站對較小的設備做出響應

Question

我正在為學校開發一個項目，我對 Bootstrap 還很陌生，我在為不同的分辨率縮放網站時一直遇到一些問題。 當我將其更改為移動設備時，圖像位於文本之上。 如果有人可以幫助我，我將不勝感激。 我已經嘗試了一切，但仍然找不到解決方案。

<body>
  
<div class="container">
    
<nav class="navbar-fixed-top sticky-top navbar" style="width: 100%; background-color: white; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);"> 
    
    <div class="navbar-header">
    
        <a class="navbar-brand"><img src="transferir.png" alt="" style="height: 65; width: 60px"></a>
        
    </div> 
    
    <div>
        <ul id="menu">
            <li><a href="#home">Home</a></li>
            <li><a href="#sobre">About</a></li>
            <li><a href="#features">Features</a></li>
            <li><a href="#contact">Contacta-nos</a></li>
        </ul>    
    </div>
        
</nav>


    
<div class="site-index">
    
    <div id="home" class="block home-block">
        <div class="container">
            <div class="col-sm-6  left-block">
                <div class="text-centered">
                    <h1>Texter</h1>
                    <p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
                    
                    <p class="Medium-text">Download Em Breve</p>
                    <a href="https://play.google.com/?hl=pt-PT" target="_blank"><img src="playstore.png" alt="Playstore" class="d-img"></a>
                    <a href="https://www.apple.com/pt/ios/app-store/" target="_blank"><img src="appstore.png" alt="Apple App Store" class="d-img"></a>
                </div>
            </div>
            <div class="col-sm-5  right-block">
                <img src="phones.png" style="height: 350px; float: right; vertical-align: middle; width: auto !important; position: relative">            
            </div>   
        </div>
        <hr class="sombra">
    </div>
</div>

css

html{
   scroll-behavior: smooth;
}

body{
    padding-top: 1%;
    font-family: 'Lato', sans-serif;
}

.block{
    padding: 35px;
}

.home-block{
    min-height: calc(100vh - 90px);
}

#home .container{
    height: 500px;  
}

.left-block{
    text-align: center;
    top: 30%;     
}

.right-block{
    bottom: 35%;
    margin-left: 25%;
}

.container{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

桌面

當我擠壓頁面時

Answer 1

您可以使用

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

看到這個和這個

Answer 2

首先，您可能忘記在<div class="container">...</div>元素中包含<div class="row"></div>包裝器，就像這里所說的那樣。

其次，我強烈建議您不要過多地使用 CSS 屬性，例如position: relative / absolute 、 top: ...; left: ...; right: ...; bottom: ... top: ...; left: ...; right: ...; bottom: ... top: ...; left: ...; right: ...; bottom: ... ，因為它們中的大多數破壞了 CSS 原生文檔流，只有在其他工具沒有多大幫助時才應該使用它們。

如果你有足夠的時間，我建議你閱讀這一系列文章： CSS 布局

我關閉了大多數此類屬性，它看起來已經好多了：

如果我不提供一些代碼幫助，這個答案將只是一個巨大的建議，所以就在這里。

首先在 DevTools 中禁用這些屬性：

.home-block{
    /* min-height: calc(100vh - 90px); */
}

#home .container{
    /* height: 500px; */
}

.left-block{
    /* text-align: center; */
    /* top: 30%; */
}

.right-block{
    /* bottom: 35%; */
    /* margin-left: 25%; */
}

修復 Bootstrap 標記：

<div id="home" class="block home-block">
    <div class="container">
        <!-- Added this wrapper, changed .col-* classes to responsive -->
        <div class="row">
            <!-- Removed .left-block class -->
            <div class="col-sm-12 col-lg-6  left-block">
                <div class="text-centered">
                    <h1>Texter</h1>
                    <p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
                    <p class="Medium-text">Download Em Breve</p>
                    <a href="https://play.google.com/?hl=pt-PT" target="_blank"><img src="playstore.png" alt="Playstore" style="height: 40px;"></a>
                    <a href="https://www.apple.com/pt/ios/app-store/" target="_blank"><img src="appstore.png" alt="Apple App Store" style="height: 40px"></a>
                </div>
            </div>
            <!-- Removed .right-block class, added .text-centered class -->
            <div class="col-sm-12 col-lg-6 text-centered">
                <!-- Removed inline styles (bad practice), changed "height" to be an attribute -->
                <img src="phones.png" height="350">            
            </div>
        </div>
    </div>
</div>

然后你會得到這張圖片（圖片和頂部按鈕之間沒有間隔）：

這個是通過應用margin-top: ...px;解決的margin-top: ...px; 到圖像塊，以.col-md-*分辨率和更低的分辨率包裝在@media查詢中。 有關確切值，請參閱Bootstrap 網格選項。 有關應用@media查詢的更多信息，請參閱MDN 文檔

至於導航欄，我首先建議您在ul#menu元素上禁用padding-left ：

#menu {
    padding-left: 0;
}

盡管它在sm分辨率下修復了它，但導航菜單仍然在分辨率小於520px包裹在徽標下。 我建議您在腦海中或在諸如https://app.diagrams.net/ 之類的標記服務中想象如何處理這種情況，然后開發您決定的內容。

Twitter Bootstrap：無法使網站對較小的設備做出響應

問題描述

2 個解決方案

解決方案1
1 2020-09-26 16:56:27

解決方案2
1 已采納 2020-09-26 18:22:24

Twitter Bootstrap：無法使網站對較小的設備做出響應

問題描述

2 個解決方案

解決方案1 1 2020-09-26 16:56:27

解決方案2 1 已采納 2020-09-26 18:22:24

解決方案1
1 2020-09-26 16:56:27

解決方案2
1 已采納 2020-09-26 18:22:24