Question

我试图将文本向左浮动，向右浮动，因此它们是并排的。但是，在这样做时，页脚移动到位，两个项目都没有正确对齐

我试图并排获得文本和表单，当低于最大宽度（@media）时，文本应该在TOP上并且形成如下

代码：

<!DOCTYPE html>

<html>
    <head>
        <title>Soni's Computer Repair</title>
        <meta name="viewport" content="width=device-width, inital-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

        <style type="text/css">

            .footer {
                position:relative;
                bottom:0;
                margin:auto;
            }

            body {
                font-family:"Open Sans", Helvetica, Arial, sans-serif;
                font-weight:300;
                font-size: 12px;
                color:#777;
            }

            #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

            #contact {
                background:#F9F9F9;
                padding:25px;
                margin:50px 0;
            }

            #contact h3 {
                color: #F96;
                display: block;
                font-size: 30px;
                font-weight: 400;
            }

            #contact h4 {
                margin:5px 0 15px;
                display:block;
                font-size:13px;
            }

            fieldset {
                border: medium none !important;
                margin: 0 0 10px;
                min-width: 100%;
                padding: 0;
                width: 100%;
            }

            #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
                width:100%;
                border:1px solid #CCC;
                background:#FFF;
                margin:0 0 5px;
                padding:10px;
            }

            #contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
                -webkit-transition:border-color 0.3s ease-in-out;
                -moz-transition:border-color 0.3s ease-in-out;
                transition:border-color 0.3s ease-in-out;
                border:1px solid #AAA;
            }

            #contact textarea {
                height:100px;
                max-width:100%;
              resize:none;
            }

            #contact button[type="submit"] {
                cursor:pointer;
                width:100%;
                border:none;
                background:#0CF;
                color:#FFF;
                margin:0 0 5px;
                padding:10px;
                font-size:15px;
            }

            #contact button[type="submit"]:hover {
                background:#09C;
                -webkit-transition:background 0.3s ease-in-out;
                -moz-transition:background 0.3s ease-in-out;
                transition:background-color 0.3s ease-in-out;
            }

            #contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

            #contact input:focus, #contact textarea:focus {
                outline:0;
                border:1px solid #999;
            }
            ::-webkit-input-placeholder {
             color:#888;
            }
            :-moz-placeholder {
             color:#888;
            }
            ::-moz-placeholder {
             color:#888;
            }
            :-ms-input-placeholder {
             color:#888;
            }

            @media screen and (max-width:700px) {
                .mainInfo {
                text-align: center;
                margin-left: auto;
                margin-right: auto;
            }

            .form {
                max-width: 400px;
                text-align: center;
                margin-right: auto;
                margin-left: auto;

            }

            .contactInfo {
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                border:1px solid red;
                max-width: 80%;

            }
            }


        </style>

    </head>

    <body>
        <div class="navbar navbar-inverse navbar-static-top">

            <div class="container">
                <div class="logo">
                    <center>
                        <a class="navbar-brand" href="#"><img src="Final.png"/></a>
                    </center>
                </div>

                <div class="navbar-header">
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="mainInfo">
            <div class="contactInfo">
            <h2>Contact Us</h2>
            <p>Mobile: 07588418134</p>
            <p>Mobile: 07572601345</p>
            <p>Email: info@SonisRepair.com</p>
            <p><b>Alternatively, you can email us using the Contact Form below, and we will get back to you within 24 Hours</b></p>
        </div>

        <div class="content">
            <div class="form">  
                <form id="contact" action="" method="post">
                    <h3>Get in Touch:</h3>
                    <h4>We aim to reply within 24 hours!</h4>
                    <fieldset>
                      <input placeholder="Your Name" type="text" tabindex="1" required autofocus>
                    </fieldset>
                    <fieldset>
                      <input placeholder="Your Email Address" type="email" tabindex="2" required>
                    </fieldset>
                    <fieldset>
                      <input placeholder="Your Phone Number" type="tel" tabindex="3" required>
                    </fieldset>
                    <fieldset>
                      <textarea placeholder="Describe your problem...." tabindex="5" required></textarea>
                    </fieldset>
                    <fieldset>
                      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
                    </fieldset>
                </form>
            </div>
        </div>
        </div>

        <footer class="footer">
            <div class="container">
                <h6 class="text-center">Copyright &copy; Soni Computer Repairs</h6>
                <p class="text-center">www.SoniRepairs.com</p>
            </div>
        </footer>
    </body>
</html>

Answer 1

一个建议是使用Bootstrap's grid system来帮助您的事业。我设置了 JSFiddle example ，我将HTML元素和CSS放在一起。我将您的元素重组为网格系统。然后它似乎做你想要的。您可以调整结果窗口的大小以查看其执行情况。

<div class="container mainInfo">
    <div class="row">
        <div class="col-sm-6">
            <div class="contactInfo">
                CONTENT INFO GOES HERE
            </div>
        </div>
        <div class="col-sm-6">
            <div class="content">
                <div class="form">  
                    FORM GOES HERE
               </div>
            </div>
        </div><!-- / col -->
    </div><!-- / row -->
</div><!-- / container -->
<footer class="footer">
    <div class="container">
        FOOTER CONTENT GOES HERE
    </div>
</footer>

希望这有帮助。

当文本和表单浮动时，粘性页脚移动到位 - BootStrap

1 个答案: