Bootstrap 表单在移动视图中未居中

Question

我试图让我的表单在桌面上查看时居中，最重要的是，当我在移动设备上查看时 phone，例如 Ipad，甚至 iPhone。

这是我的表单代码

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

如您所见，它没有居中，有人可以帮助我解决我做错的地方吗？这是我正在 www.kevineperjesi.com/found6test

网站上的 link

Answer 1

尝试使用 Bootstrap CDN 文件查看实际问题出在哪里：

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>

Answer 2

我建议重新格式化您编写的代码以根据需要使用容器、行和列。无论如何，每次你想要一个新行时，你应该把它放在一行中。如果您希望 2 个项目能够内联，它们应该都在同一行中。这是一个如何以干净的方式完成它的示例。

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

您可以充分利用 col-xs-* 实用程序。

如果您使用 col-xs-12 col-sm-12，这意味着在 xs 和 sm 屏幕尺寸上，该列将跨越页面上的所有 12 列。

您似乎希望在中号及以上尺寸上选择 2 个横跨，因此您可以放置一个 col-sm-12 col-md-6 使其成为 sm 和更小的，它将跨越所有 12 个，md 和向上它只会跨越一半。

Bootstrap 使列非常非常简单。这些文档做得很好，为制作出色的网站提供了很多有用的信息。祝你好运！

http://getbootstrap.com/css/ 包含网格系统的文档。

Bootstrap 表单在移动视图中未居中

Bootstrap Form Not centered while in mobile view

twitter-bootstrap

bootstrap-form-helper

twitter-bootstrap-form