0

当我在桌面上查看它时，最重要的是，当我在移动电话（如 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 上工作的网站的链接

4

2 回答 2

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>
于 2016-09-21T03:08:29.227 回答
0

我建议重新格式化您编写的代码，以便根据需要使用容器、行和列。每次你无论如何都希望某样东西出现在新行上时，你应该把它排成一行。如果您希望 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-* 实用程序。

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

您似乎希望在中等大小及以上的情况下选择为 2，因此您可以放置​​ acol-sm-12 col-md-6以使其 sm 和更小，它将跨越所有 12，而 md 及以上将仅跨越一半。

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

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

于 2016-09-21T03:18:52.117 回答