Установите флажки и поля ввода в строке поиска

Я пытаюсь создать панель поиска, где зеленый div будет посередине серого (см. Http://codepen.io/anon/pen/LRBEvq?editors=1100 ), а также флажки, выберите меню выпадающего меню и входное поле все встроено с двумя кнопками - так что все в одной строке. Я использую Bootstrap, чтобы сделать его отзывчивым, но застрял и не могу понять. Спасибо за всю помощь!

Вот мой html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-7">
            <!-- main content -->

            <div class="checkbox">
              <span class="choice-details">
                                       <label class="checkbox-inline">
                                          <input type="checkbox" value="" checked>Lorem
                                          </label>
                                          <label class="checkbox-inline">
                                          <input type="checkbox" value="">Ipsum
                                        </label>
                                    </span>
            </div>
            <div class="choice-select">
              <select class="form-control">
                                    <option value="one">One</option>
                                    <option value="two">Two</option>
                                    <option value="three">Three</option>
                                    <option value="four">Four</option>
                                    <option value="five">Five</option>
                                </select>
            </div>
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>


          </div>
          <div class="col-md-5">
            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

И вот мой css:

.main {
    background-color: grey;
    width: 1202px;
    height: 156px;
    margin: 0 auto;
}

.formContainer {
    width: 1140px;
    height: 85px;
    background-color: green;
}

button {
    height: 37px;
    width: 160px;
}

.choice {
    background-color: lightgrey;
    height: 37px;
}

.checkbox {
    width: 207px;
    border: 1px solid white;
}

.choice-select {
    width: 173px;
}

.choice-input {
    width: 390px;
}

html,css,twitter-bootstrap,twitter-bootstrap-3,responsive-design,

1

Ответов: 1

0

Вам нужен класс .form-inlineиз бутстрапа в теге формы. Ниже приведен пример:

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-7 form-inline">
            <!-- main content -->

            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">Name</label>
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">Email</label>
                    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
                </div>
                <button type="submit" class="btn btn-default">Send invitation</button>
            </form>

          </div>
          <div class="col-md-5">
            <button class="btn btn-primary">Lorem ipsum lorem</button>
            <button class="btn btn-success">Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

Если вы делаете каждый входной формы своего отдельного div с классом .form-groupи всем его внутри .form-inline, это делает встроенную форму.

Источник: Bootstrap Documentation

HTML, CSS, твиттер-самозагрузка, твиттер-самозагрузка-3, реагирующий-дизайн,
Похожие вопросы
Яндекс.Метрика