Javascript Twitter引导：无法使网站响应较小的设备_Javascript_Html_Css_Bootstrap 4

Javascript Twitter引导：无法使网站响应较小的设备

javascript html css bootstrap-4

Javascript Twitter引导：无法使网站响应较小的设备,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我正在为学校开发一个项目，我对Bootstrap非常陌生，我一直在为不同的分辨率扩展网站时遇到一些问题。当我将其更改为移动时，图像会显示在文本的顶部。如果有人能帮助我，我将不胜感激。我什么都试过了，还是找不到解决办法 <body> <div class="container"> <nav class="navbar-fixed-top sticky-top navbar" style="width:

我正在为学校开发一个项目，我对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>

您可以使用

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

请参见和

首先，您可能忘记了在

..

元素中包含

包装器，正如它所说的那样

其次，我强烈建议您不要过多地使用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%; */
}

修复引导标记：

<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>

虽然它将其固定在

sm

分辨率上，但当分辨率小于约

520px

时，导航菜单仍会包裹在徽标下。我建议您在脑海中或在一些标记服务（如）中想象一下如何处理这种情况，然后开发您决定要开发的内容。

欢迎使用StackOverflow！请使用

code snippet

按钮显示您的代码（或在帖子编辑器中按Ctrl+M）。如果您的图像显示不正确，您可以尝试提供域名的完整链接（如果您的网站托管在某个地方），或者使用特殊工具（如显示其他相同大小的图像）。另外，请提供指向引导版本的链接。另外，我个人的建议-不要使用bootstrap，现在每一个标记都可以不用CSS框架完成。使用bootstrap是一个要求吗？不，这是一个免费的项目。我没有得到任何东西，我上传我的文件到vps，在我的普通chrome上，网站都变形了，在我的括号中，chrome previewer就像它应该的一样，你认为问题是什么？Vps：与括号预览器的工作原理相同，但与正常铬合金的工作原理不一致

<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>

#menu {
    padding-left: 0;
}