1

Использую bootstrap v.3.0.0.

input с 2 кнопками с иконками необходимо растянуть на всю ширину блока. Ширина всех элементов задана в %. При уменьшении ширины экрана, input и кнопки соразмерно уменьшаются. Но при этом иконки на кнопках вылезают за границы кнопки: иконки вылезают за границы кнопок

https://jsfiddle.net/lilubanana/53d8tbmy/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

.search-input {
  border: 1px solid #dadada;
  height: 52px;
  width: 84.8%;
  padding: 10px 30px;
  vertical-align: bottom;
  box-sizing: border-box;
}
.bttn {
  float:right;
  position: relative;
  border: none;
  height: 52px;
  width: 7.6%;
  /*min-width: 32px;*/
  background: #dadada;
  border-right: 1px solid #cbcbcc;
  cursor: pointer;
}
.bttn:hover {
  position: relative;
  border: none;
  height: 52px;
  width: 7.6%;
  /*min-width: 32px;*/
  background: #f06420;
}
<input class="search-input" type=search name="focus" required placeholder="Введите запрос"><button class="bttn icons bttn-search"></button><button type="button" class="bttn icons bttn-settings"></button>

Задавать ширину через медиа-запросы в данном случае плохое решение, т.к. придется отслеживать разную ширину экрана.

Какие еще способы можно применить?

2
  • jsfiddle.net/soledar10/tu6337fh
    – soledar10
    7 июн 2016 в 12:01
  • спасибо большое за вариант! но не хочу перегружать верстку лишними дивами. хотя ваше решение тоже рабочее.
    – siberian
    7 июн 2016 в 12:52

2 ответа 2

2

Как растянуть одно из полей на всю доступную ширину

(Подцепил бутстрап 3.0.0 и упростил CSS.)


1. Завернуть в блок с overflow:hidden;

Кнопки делаем плавающими блоками с фиксированной шириной. Блок с overflow:hidden; заберёт всё оставшееся место. Поле внутри него растягиваем на 100% и делаем блоком, чтобы избежать лишних просветов, которыми грешат инлайновые элементы.

https://jsfiddle.net/glebkema/u4yz3twp/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

.wide {
  overflow: hidden;
}
.search-input {
  border: 1px solid #dadada;
  display: block;
  height: 52px;
  padding: 10px 30px;
  width: 100%;
}
.bttn {
  background: #dadada;
  border: 0;
  border-right: 1px solid #cbcbcc;
  display: block;
  float: right;
  height: 52px;
  width: 52px;
}
.bttn:hover {
  background: #f06420;
}
<button  type="button" class="bttn icons bttn-search"></button>
<button type="button" class="bttn icons bttn-settings"></button>
<div class="wide"><input class="search-input" type=search name="focus" required placeholder="Введите запрос"></div>

2. Посчитать ширину функцией calc

Можно ширину кнопок сделать постоянной, а для поля ввода воспользоваться функцией сalc. Например, так:

https://jsfiddle.net/glebkema/o2yo6bqo/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

.search-input {
  border: 1px solid #dadada;
  height: 52px;
  padding: 10px 30px;
  vertical-align: top;
  width: calc(100% - 104px);
}
.bttn {
  background: #dadada;
  border: 0;
  border-right: 1px solid #cbcbcc;
  height: 52px;
  width: 52px;
}
.bttn:hover {
  background: #f06420;
}
<input class="search-input" type=search name="focus" required placeholder="Введите запрос"><button  type="button" class="bttn icons bttn-search"></button><button type="button" class="bttn icons bttn-settings"></button>

2
  • спасибо большое. воспользуюсь вашим вариантом) хотя calc не везде поддерживается, но попробовать стоит)
    – siberian
    7 июн 2016 в 12:54
  • @MarinaVoronova Добавил в ответ решение без calc. 7 июн 2016 в 13:14
0

Обернул с помощью flex и все заработало. Но указывать ширину кнопки в процентах не правильно, так как делаете вы. У вас не вставлены сами иконки внутрь кнопки.

.myFlex {
  display: flex;
}
.myFlex > .search-input {
  flex: 2;
  border: 1px solid #dadada;
  height: 52px;
  padding: 10px 30px;
  vertical-align: bottom;
  box-sizing: border-box;
}

.btn-custom {
  border: 0;
  border-radius: 0;
  background: #dadada;
  border-right: 1px solid #cbcbcc;
  cursor: pointer;
}

.btn-custom:hover {
  background: #f06420;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="myFlex">
  <input class="search-input" type=search name="focus" required placeholder="Введите запрос">
    <button class="btn-custom">
      <i class="glyphicon glyphicon-star"></i>
  </button>
    <button type="button" class="btn-custom">
    <i class="glyphicon glyphicon-ok"></i>
  </button>
</div>

<div style="width: 800px">
  <div class="myFlex">
    <input class="search-input" type=search name="focus" required placeholder="Введите запрос">
    <button class="btn-custom">
      <i class="glyphicon glyphicon-star"></i>
  </button>
    <button type="button" class="btn-custom">
    <i class="glyphicon glyphicon-ok"></i>
  </button>
  </div>
</div>

<div style="width: 400px">
  <div class="myFlex">
    <input class="search-input" type=search name="focus" required placeholder="Введите запрос">
    <button class="btn-custom">
      <i class="glyphicon glyphicon-star"></i>
  </button>
    <button type="button" class="btn-custom">
    <i class="glyphicon glyphicon-ok"></i>
  </button>
  </div>
</div>

<div style="width: 200px">
  <div class="myFlex">
    <input class="search-input" type=search name="focus" required placeholder="Введите запрос">
    <button class="btn-custom">
      <i class="glyphicon glyphicon-star"></i>
  </button>
    <button type="button" class="btn-custom">
    <i class="glyphicon glyphicon-ok"></i>
  </button>
  </div>
</div>

6
  • спасибо за вариант! flex это круто, но в данном проекте я его не использую
    – siberian
    7 июн 2016 в 12:53
  • @MarinaVoronova если вы используете свойство border, то чем свойство flex хуже? это стандартизированная вещь, которая даже избавляет вас от бутстрапа. Я к чему веду то... Использовать flex надо, и чем раньше все поймут насколько это хорошая вещь, тем лучше. Но ваш пример, мог бы работать и без флекс, просто в button внутрь тега, вы должны были вставлять иконку, а не на саму кнопку вешать класс иконки, это логически неверно :) 7 июн 2016 в 13:27
  • на счет flex полностью согласна! очень хочу его везде применять. не могу вставить иконку внутрь кнопки, т.к. у иконки и у кнопки есть состояние hover. или просто не знаю способа лучше
    – siberian
    8 июн 2016 в 4:07
  • т.е. при наведении на кнопку меняется background у кнопки и должна меняться иконка. пока не придумала как это можно реализовать без hover:after
    – siberian
    8 июн 2016 в 4:13
  • 1
    если менять цвет, то по ховеру на кнопку button:hover прибавлять ещё i для иконки. button:hover i { color: green; } 8 июн 2016 в 5:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.