Question

我有这个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

如何水平居中。我尝试使用col-md-offset-3，但没有运气。

Answer 1

要使用col-xs-offset-课程，您必须使用带有row课程的div。

这在http://getbootstrap.com/css/#grid上有记录。

检查有关网格系统的详细信息，然后您就可以将内容定位到中心位置。代码看起来像这样：

<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

只是为了好玩

  <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>

Bootstrap css：尝试使用偏移量，但不能使其居中

2 个答案: