Bootstrap Form Не в центре в мобильном режиме

Question

Я пытаюсь расположить свою форму по центру при просмотре на рабочем столе и, что наиболее важно, при просмотре на мобильном телефоне, таком как 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

Answer 1

Я бы порекомендовал переформатировать код, который вы написали, чтобы использовать контейнеры, строки и столбцы по своему желанию. Каждый раз, когда вы хотите, чтобы что-то появилось на новой линии, несмотря ни на что, вы должны поместить это в ряд. Если вы хотите, чтобы 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/ включает документы для системы сетки.

Answer 2

Попробуйте использовать файлы Bootstrap CDN, чтобы увидеть, где на самом деле проблема:

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

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