Блог

Главная - Вопросы по программированию - наложение содержимого начальной загрузки в mobileview

наложение содержимого начальной загрузки в mobileview

#javascript #jquery #html #css #twitter-bootstrap

#javascript #jquery #HTML #css #twitter-bootstrap

Вопрос:

   <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="">

    <meta name="author" content="">

<title>BUNNY'S WEBSITE</title>

    <!-- Bootstrap Core CSS -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->

    <link href="css/chiru.css" rel="stylesheet">

  <!-- jQuery -->

    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->

    <script src="js/bootstrap.min.js"></script>

    <!-- Scrolling Nav JavaScript -->

    <script src="js/jquery.easing.min.js"></script>

    <script src="js/scrolling-nav.js"></script>

<style>

body {
    width: 100%;

    height: 100%;
}

html {
    width: 100%;

    height: 100%;
}

@media(min-width:767px) {

    .navbar {

        padding: 20px 0;

        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;

        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;

        transition: background .5s ease-in-out,padding .5s ease-in-out;

    }

    .top-nav-collapse {

        padding: 0;
    }
}

.intro-section {

    height: 100%;

    padding-top: 100px;

    text-align: center;

    background: #fff;
}

.services-section {

    height: 100%;

    padding-top: 100px;

    text-align: center;

    background:  #eff5f5;

}

.contact-section {

    height: 100%;

    padding-top: 100px;

    text-align: center;

    background: #eee;

}

.footer-section {

    padding-top: 100px;

    text-align: center;

    background: #fff;


}

</style>



</head>



<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-
target are part of the built-in Bootstrap scrollspy function -->



<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">



    <!-- Navigation -->

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

        <div class="container">

            <div class="navbar-header page-scroll">

                <button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-ex1-collapse">

                    <span class="sr-only">Toggle navigation</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand page-scroll" href="#page-top">Seminar 
Support</a>

            </div>



            <!-- Collect the nav links, forms, and other content for toggling --
>

            <div class="collapse navbar-collapse navbar-ex1-collapse">

                <ul class="nav navbar-nav">

                    <!-- Hidden li included to remove active class from about 
link when scrolled up past about section -->

                    <li class="hidden">

                                <a class="page-scroll" href="#page-top"></a>

                    </li>

                    <li>

                                <a class="page-scroll" href="#intro">Home</a>

                    </li>

                    <li>

                                <a class="page-scroll" 
href="#services">Services</a>

                    </li>

                    <li>

                                <a class="page-scroll" href="#Topics">Topics</a>

                    </li>

                    <li>

                                <a class="page-scroll" 
href="#contact">ContactUs</a>

                    </li>

                </ul>

                <ul class="nav navbar-nav navbar-right">

                      <li><a href="#"><span class="glyphicon glyphicon-user">
</span> Sign Up</a></li>

                      <li><a href="#"><span class="glyphicon glyphicon-log-in">
</span> Login</a></li>

                </ul>

            </div>

            <!-- /.navbar-collapse -->

        </div>

        <!-- /.container -->

    </nav>



   <!-- Intro Section -->

 <section id="intro" class="intro-section">

<div class="container text-center">

  <h1>Let’s Make The Best Presentation</h1>

  <p>make a better presentation | know latest topics | know tips</p>

  <button type="button" class="btn btn-primary">Get Started</button>

  <a href="#">Learn more</a><br/>

  <img src="E:htmlProjectfontssslogo.png" alt="Cinque Terre"  width="270" 
height="200">

</div>

</section>





 <!-- Services Section -->

<section id="services" class="services-section">

<div class="container-fluid">

<div class="row">



    <div class="col-sm-3">

    <div class="lecture text-center">

    <span class="process-icon ilecture">amp;nbsp;</span>

    <h2>Lecture</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat.<p>

    <button type="button" class="btn"> Read More </button>

    </div>

    </div>



    <div class="col-sm-3">

    <div class="Tip’s text-center">

    <span class="process-icon iTip’s">amp;nbsp;</span>

    <h2>Tip’s</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat.<p>

    <button type="button" class="btn"> Read More </button>

    </div>

    </div>



    <div class="col-sm-3">

    <div class="Ppt’s text-center">

    <span class="process-icon iPpt’s">amp;nbsp;</span>

    <h2>Ppt’s</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat.<p>

    <button type="button" class="btn"> Read More </button>


    </div>

    </div>


    <div class="col-sm-3">

    <div class="Topic’s text-center">

    <span class="process-icon iTopic’s">amp;nbsp;</span>

    <h2>Topic’s</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat.<p>

    <button type="button" class="btn"> Read More </button>

    </div>



</div>    

</div>

</section>

<!-- lecture tips ppts topics -->



    <!-- Contact Section -->

    <section id="contact" class="contact-section">

        <div class="container">

            <div class="row">

                <div class="col-sm-12 text-center">

                    <h2 class="section-heading">Contact Us</h2>

                    <h3 class="section-subheading text-muted">We are always 
ready to help you</h3>

                </div>

            </div>

            <div class="row">

                <div class="col-sm-12">

                    <form name="sentMessage" id="contactForm" novalidate>

                        <div class="row">

                            <div class="col-md-6">
'
                                <div class="form-group">

                                    <input type="text" class="form-control" 
placeholder="Your Name *" id="name" required data-validation-required-
message="Please enter your name.">

                                    <p class="help-block text-danger"></p>

                                </div>

                                <div class="form-group">

                                    <input type="email" class="form-control" 
placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">

                                    <p class="help-block text-danger"></p>

                                </div>

                                <div class="form-group">

                                    <input type="tel" class="form-control" 
placeholder="Your Phone *" id="phone" required data-validation-required-
message="Please enter your phone number.">

                                    <p class="help-block text-danger"></p>

                                </div>

                            </div>



                            <div class="col-md-6">

                                <div class="form-group">

                                    <textarea class="form-control" 
placeholder="Your Message *" id="message" required data-validation-required-
message="Please enter a message."></textarea>

                                    <p class="help-block text-danger"></p>

                                </div>

                            </div>

                            <div class="clearfix"></div>

                            <div class="col-sm-12 text-center">

                                <div id="success"></div>

                                <button type="submit" class="btn btn-xl">Send 
Message</button>

                            </div>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </section>





<footer id="footer" class="footer-section">

<div class="container">

<div class="row">



<div class="col-sm-12 text-center">





<ul class="footer-links list-inline">

<li><a href="#">Home</a></li>

<li><a href="#">AboutUs</a></li>

<li><a href="#">Topics</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">ContactUs</a></li>

</ul>



<div>

<button type="button" href="#" class="btn btn-primary twitter"><span 
class="social-sprite twitter">amp;nbsp;</span>Follow us on Twitter</button>

<button type="button" href="#" class="btn btn-primary facebook"><span 
class="social-sprite twitter">amp;nbsp;</span>Like us on Facebook</button>

</div>



<small> amp;copy; <a href="#">Seminar Support</a> 2016</small>

</div>

</div>

</footer>





</body>

</html>

Комментарии:

1. Пожалуйста, переформатируйте свой вопрос. Я не буду это читать.

2. Форматирование кода ужасно, и было бы полезно, если бы вы также могли предоставить скриншот.

3. Содержимое, которое я предоставляю в определенном блоке div, превышает этот блок и входит в следующий блок в мобильном представлении. Если я попытался увеличить процент высоты в css, то в представлении рабочего стола оставшееся пространство этого блока div будет пустым. Кто-нибудь может помочь мне решить эту проблему, пожалуйста.

Ответ №1:

используйте все классы сетки, такие как col-lg, col-md, col-sm, col-xs, вместо col-sm-3

Комментарии:

1. Спасибо, но как добавить разные типы классов сетки для определенной строки?

2. Содержимое, которое я предоставляю в определенном блоке div, превышает этот блок и входит в следующий блок в мобильном представлении. Если я попытался увеличить процент высоты в css, то в представлении рабочего стола оставшееся пространство этого блока div будет пустым. Кто-нибудь может помочь мне решить эту проблему, пожалуйста.