Как заставить панель поиска реагировать в Bootstrap?

Я ищу способ сделать эту панель поиска с ее входами и кнопками. Однако я застрял в свойствах Bootstrap, и когда я сжимаю окно, все стопки очень плохие, и я просто не могу понять, как применять некоторые лучшие классы и реквизиты. Вот ссылка codepen: http://codepen.io/anon/pen/WGKOmB

Цените все советы

Это мой html:

.row {
  background-color: blue;
  padding: 40px 30px;
}
.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  margin: 0 auto;
}
.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}
button {
  height: 37px;
  width: 160px;
}
.choice {
  background-color: lightgrey;
  height: 37px;
}
div.form-group.checkbox {
  width: 207px;
  background-color: white;
  padding: 5px 10px;
}
select.form-control {
  width: 173px;
}
input.form-control.choice-input {
  /*.choice input input*/
  width: 360px;
  height: 38px;
}
<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="row">
      <!-- row -->

      <div class="col-md-8 col-sm-6" style="background-color: lightblue; height: 74px;">
        <p>Lorem ipsum</p>
        <div class="form-inline">
          <div class="form-group checkbox">
            <span><input type="checkbox" value="" checked></span>
            <label>Lorem</label>
            <span><input type="checkbox" value=""></span>
            <label>Ipsum</label>
          </div>
          <div class="form-group">
            <select class="form-control">
              <option value="one">Lorem ipsum</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="form-group">
            <input class="form-control choice-input" type="text" placeholder="Placeholder text">
          </div>
        </div>
        <!-- end form-inline -->
      </div>
      <div class="col-md-4 col-sm-6" style="background-color: lightgreen; height: 74px;">

        <p class="pull-right">Lorem ipsum</p>
        <div class="btn-group">
          <button class="btn btn-default" style="margin-right: 10px">Lorem ipsum lorem</button>
          <button class="btn btn-default">Lorem lorem lorem</button>
        </div>

      </div>

    </div>
  </div>
  <!-- end row -->
  </div>
</body>

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

1

Ответов: 2


0

Слово от мудрых (а не я), никогда не используйте встроенный стиль. Всегда ставьте все в CSS. Кроме того, вы устанавливаете определенную высоту как для синего квадрата, так и для светло-зеленого окна. Поэтому, даже если браузер более узкий и будет находиться в зоне col-sm- * и col-xs- *, вы все равно будете иметь заданную высоту. Вы должны указать имя класса, например height-height, а затем в CSS написать что-то вроде следующего:

.form-height {
    height: 150px; /* Or whatever height you find appropriate */
}
@media (min-width:768px) {
    .form-height {
        height: 74px;
    }
}

Что бы это могло сделать, так это сказать, что, когда браузер более узкий, чем 768px, то есть когда он считается col-xs- * при загрузке, он должен иметь определенную высоту. Когда он будет больше, он будет иметь разную высоту.

Однако всегда лучшее решение - никогда не использовать свойство высоты. Причина, по которой вы это делаете, вероятно, потому, что вам нужно определенное дополнение. Поэтому вы можете написать следующий CSS для класса:

.form-height {
    padding: 10px 0px; /* Give the top and bottom 10px of padding and nothing to the right or left */
}

0

Попробуйте этот код

<div class="container">
<form class="form-inline" style="padding: 20px 0;">
    <div class="row">   
        <div class="col-sm-8 col-md-9">
            <div class="form-group">
                <label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
                <label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
            </div>
            <div class="form-group">
                <select class="form-control" id="sel1">
                    <option>Option 1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="usr" placeholder="Placeholder">
            </div>
        </div>
        <div class="col-sm-4 col-md-3">
            <button type="button" class="btn btn-default">Default</button>
            <button type="button" class="btn btn-success">Success</button>
        </div>
    </div>
</form>

Демо здесь: https://jsfiddle.net/adb0br5e/1/

HTML, CSS, твиттер-самозагрузка, отзывчивый дизайн,
Похожие вопросы