Bootstrap Form Nicht zentriert, während in der mobilen Ansicht

Question

Ich versuche, meine Form zu zentrieren, während ich es auf dem Desktop und am wichtigsten, wenn ich es auf einem Mobiltelefon, wie Ipad, oder sogar ein iPhone anzeigen.

Hier ist mein Formular Code

 <div class="col-md-10 col-md-offset-1"> 
         <form class="form jumbotron-form"> 
          <div class="container"> 
           <h3 class="text-center">Find the Business Waiting For You!</h3> 
           <div class="col-md-6"> 
            <div class="form-group"> 
             <select class="form-control"> 
              <option value="">Industry</option> 
             </select> 
            </div> 
           </div> 
           <div class="col-md-6"> 
            <div class="form-group"> 
             <select class="form-control"> 
              <option value="">State</option> 
             </select> 
            </div> 
           </div> 

           <div class="form-group"> 
            <div class="text-center"> 
             <button type="submit" class="btn btn-default">Search</button> 
             <p><a class="search" href="#">Advanced Search</a></p> 
            </div> 
           </div> 
          </div> 
         </form> 

        <div class="overlay-detail text-center"> 
         <a href="#service"><i class="fa fa-angle-down"></i></a> 
        </div>  
       </div> 

Wie man sieht es nicht jemand centerd kann mir helfen, was im falsch zu machen. hier ist der Link zu meiner Seite, die auf www.kevineperjesi.com/found6test

Answer 1

Ich würde empfehlen, den Code neu zu formatieren, den Sie geschrieben haben, um Container, Zeilen und Spalten wie gewünscht zu verwenden. Jedes Mal, wenn Sie wollen, dass etwas in einer neuen Zeile ist, egal was passiert, sollten Sie das in eine Reihe bringen. Wenn 2 Elemente inline sein sollen, sollten sie beide in derselben Zeile stehen. Hier ist ein Beispiel, wie es sauber gemacht werden kann.

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <h3 class="text-center">Find the Business Waiting For You!</h3>  
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-12 col-md-6"> 
     <div class="form-group"> 
      <select class="form-control"> 
       <option value="">Industry</option> 
      </select> 
     </div> 
     </div> 
     <div class="col-sm-12 col-md-6"> 
     <div class="form-group"> 
      <select class="form-control"> 
       <option value="">State</option> 
      </select> 
     </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group text-center col-xs-12"> 
     <button type="submit" class="btn btn-default">Search</button> 
     <p><a class="search" href="#">Advanced Search</a></p> 
     </div> 
     <div class="text-center col-xs-12"> 
     <a href="#service"><i class="fa fa-angle-down"></i></a> 
     </div> 
    </div> 
    </div> 

Sie können die Dienstprogramme col-xs- * sehr nutzen.

Wenn Sie eine col-xs-12 col-sm-12 verwenden, bedeutet dies, dass auf der xs- und sm-Bildschirmgröße diese Spalte alle 12 Spalten auf der Seite umfasst.

Sie schien, dass die Auswahlen 2 auf mittlerer Größe und höher sein, so können Sie eine col-sm-12 col-md-6 setzen, um es so zu machen, dass sm und kleiner, wird es alle 12 überspannen, und MD und wird es nur überspannen Hälfte.

Bootstrap macht Spalten sehr sehr einfach. Die Dokumente sind gut gemacht, geben Sie viele nützliche Informationen für die Erstellung großer Websites. Viel Glück!

http://getbootstrap.com/css/ enthalten die Dokumente für das Grid-System.

Answer 2

Try Im arbeitend Bootstrap CDN-Dateien zu verwenden, um zu sehen, wo das eigentliche Problem ist,:

http://getbootstrap.com/getting-started/#download

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div class="col-md-10 col-md-offset-1"> 
    <form class="form jumbotron-form"> 
    <div class="container"> 
     <h3 class="text-center">Find the Business Waiting For You!</h3> 
     <div class="col-md-6"> 
      <div class="form-group"> 
      <select class="form-control"> 
       <option value="">Industry</option> 
      </select> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
      <select class="form-control"> 
       <option value="">State</option> 
      </select> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="text-center"> 
      <button type="submit" class="btn btn-default">Search</button> 
       <p><a class="search" href="#">Advanced Search</a></p> 
      </div> 
     </div> 
    </div> 
    </form> 

    <div class="overlay-detail text-center"> 
    <a href="#service"><i class="fa fa-angle-down"></i></a> 
    </div>  
</div>