Bootstrap css: versuchen, mit Offset zu arbeiten, kann aber nicht zum Zentrum machen

Question

Ich habe diesen HTML:

<div id = "search_form" > 
    <h1> Need idea for your trip? </h1> 
    <div class="input-group"> 
     <form action="" method="get" id = "search-form" > 
      {% csrf_token %} 

      <div class="col-xs-6"> 
       {{ form.as_p }} 
       {{ form.media }} 
      </div> 
      <div class="col-xs-6"> 
       <span class="input-group-btn"> 
        <button class="btn btn-primary" id="search_submit" name = "search_submit" type="submit" value = "submit" ><span class="glyphicon glyphicon-search"></span></button> 
       </span> 
      </div> 
     </form> 
    </div> 
</div 

Wie es horizontal zu zentrieren. Ich habe versucht, col-md-offset-3 zu verwenden, aber kein Glück.

Answer 1

Um col-xs-offset- Klassen zu verwenden, müssen Sie div mit row Klasse über sie verwenden.

Dies ist dokumentiert auf http://getbootstrap.com/css/#grid.

Überprüfen Sie Details zum Grid-System, und Sie können dann Ihren Inhalt zentrieren. Code soll wie folgt aussehen:

<div class="row"> 
    <!-- Half of width and position on center --> 
    <div class="col-xs-6 col-xs-offset-3"> 
     your content 
    </div> 
</div> 

Answer 2

Just for fun

<div class="row"> 
    <div class="col-sm-3" ></div> 
    <div id = "search_form" class="col-sm-6" > 
     <h1> Need idea for your trip? </h1> 
     <div class="input-group"> 
      <form action="" method="get" id = "search-form" > 
      {% csrf_token %} 

     <div class="col-xs-6"> 
      {{ form.as_p }} 
      {{ form.media }} 
     </div> 
     <div class="col-xs-6"> 
      <span class="input-group-btn"> 
       <button class="btn btn-primary" id="search_submit" name = "search_submit" type="submit" value = "submit" ><span class="glyphicon glyphicon-search"></span></button> 
      </span> 
     </div> 
    </form> 
</div> 
</div> 
<div class="col-sm-3" ></div> 
</div>