Question

因此，我正在尝试使用Bootstrap使我的网站具有响应能力，并且我已经对其进行了测试，以查看JavaScript是否全部正常运行。但是，在设置列网格后，内容不断消失。请注意，我的网站布局具有左侧和右侧，这与我的样式有所不同。我更改了Z-index来查看信息是否被隐藏在后面，但是仍然没有任何变化。当屏幕变小时，我希望左侧位于顶部上方，右侧位于其下方。为什么我的内容消失了？

<!-- BODY -->

<div class="split left col-sm-6">
    <div class="centered">
    <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Cover.png" class="cover">
    </img>
    </div>

    <header>
        <nav>
            <ul>
                <li><a href="#" class="menu">Menu</a>
                <div class="arrowup">
                    <ul>
                        <li><a href="#aboutus">About Us</a></li>
                        <li><a href="#newsletter">Newsletter</a></li>
                        <li><a href="#">Press Kit</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                </li>
            </ul>


            <!-- Social Media Links -->

            <div id="socialmedia">

            <a href="https://www.facebook.com/whammychat/?ref=bookmarks" target="_blank"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Social%20Media%20Icons/FB.png" alt="Facebook"></a>

            <a href="https://twitter.com/whammychat" target="_blank"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Social%20Media%20Icons/Twitter.png" alt="Twitter"></a>

            <a href="https://www.instagram.com/whammychat/" target="_blank"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Social%20Media%20Icons/Instagram.png" alt="Instagram"></a>

            </div>

        </nav>          
    </header>
</div>

<!-- RIGHT -->

<div class="split right col-sm-6">
    <div class="centered">
        <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/New%20Logo%20-%20Social%20Media.png" class="logo"></img>
        <div class=catchphrase>
            <h1> 
                <span class="messenger"> Messenger </span> 
                <span class="x"> x </span> 
                <span class="gaming"> Gaming </span> 
            </h1>
        </div>
        <p class="soon"> Coming Soon <p>
        <img class="gif" src="https://whammychat.files.wordpress.com/2018/01/gif-6-website.gif" alt="Intro GIF
        "/>

输入列属性后，它变成这样的空白页： enter image description here

集成Bootstrap后网站上的信息不显示

0 个答案: