Как сделать адаптивные кнопки?

219

08 августа 2018, 07:50

Как сделать адапативные кнопки, при увеличении размера экрана, все кнопки разлетаются. Вот код

.body { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
} 
 
.btn-space { 
  margin-right: 5px; 
} 
 
.save_button { 
  min-width: 80px; 
  max-width: 80px; 
} 
 
div.btn-group.btn-lgg { 
  margin: 0; 
  padding: 0; 
} 
 
.btn-lg { 
  width: 362px; 
  position: relative; 
} 
 
.btn-lgg { 
  width: 179px; 
  height: 60px; 
} 
 
.btn-lggg { 
  width: 222.47px; 
  height: 46px; 
} 
 
.btn-lgggg { 
  width: 222.47px; 
  height: 41px; 
} 
 
input[type="text"] { 
  width: 300px; 
  height: 40px; 
  padding-left: 25px; 
} 
 
input::placeholder { 
  text-indent: 0.1em; 
} 
 
div { 
  display: flex; 
  flex-direction: row; 
  justify-content: space-evenly; 
  align-items: center; 
} 
 
div>hr { 
  width: 125px; 
  height: 1px; 
  background: gray; 
} 
 
.gray { 
  color: gray; 
  /* Цвет символа */ 
  margin-left: 3px; 
} 
 
.price { 
  color: gray; 
} 
 
.flex { 
  display: flex; 
  justify-content: space-between; 
  flex-wrap: wrap; 
} 
 
.dropdown-menu { 
  list-style-type: none; 
  max-height: 250px; 
  overflow-y: scroll 
} 
 
:focus { 
  outline: none !important; 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <title>Block</title> 
  <link rel="stylesheet" type="text/css" href="struct.css" /> 
  <script type="text/javascript" id="sourcecode"> 
    $(function() { 
      $('.scroll-pane').jScrollPane(); 
    }); 
  </script> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <!-- Latest compiled and minified CSS --> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> 
  <!-- Optional theme --> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
</head> 
 
<body> 
  <div class="row" style="margin-left:-10px; margin-top:200px;margin:display;"> 
    <div class="container"> 
      <div class="btn-group"> 
        <form> 
          <input type="text" value="" placeholder="Страна, курорт или отель" style="  width: 276px;height: 60px;" data-toggle="dropdown" autofocus> 
          <i class="fas fa-map-marker-alt" style="margin-left:-275px;font-size:18px;color:#059bce;"></i> 
          <ul class="dropdown-menu" role="menu"> 
            <li class="list-group-item"><input type="checkbox">Все курорты, Турция</li> 
            <div> 
              <hr> 
              <h6 class="dropdown-header">Популярные курорты</h6> 
              <hr> 
            </div> 
            <li class="list-group-item"> 
              <div class="flex"> 
                <div class="left"><input type="checkbox"> Аланья,<span class="gray">Турция</span></div> 
                <div class="right"><span class="price">от 17 701 р./чел.</span></div> 
              </div> 
            </li> 
            <li class="list-group-item"> 
              <div class="flex"> 
                <div class="left"><input type="checkbox"> Анталья,<span class="gray">Турция</span></div> 
                <div class="right"><span class="price">от 18 609 р./чел.</span></div> 
              </div> 
            </li> 
            <li class="list-group-item"> 
              <div class="flex"> 
                <div class="left"><input type="checkbox"> Белек,<span class="gray">Турция</span></div> 
                <div class="right"><span class="price">от 37 896 р./чел.</span></div> 
              </div> 
            </li> 
            <li class="list-group-item"><input type="checkbox"> Бодрум,<span class="gray">Турция</span></li> 
            <li class="list-group-item"> 
              <div class="flex"> 
                <div class="left"><input type="checkbox"> Кемер,<span class="gray">Турция</span></div> 
                <div class="right"><span class="price">от 15 401 р./чел.</span></div> 
              </div> 
            </li> 
            <li class="list-group-item"><input type="checkbox"> Мармарис,<span class="gray">Турция</span></li> 
            <li class="list-group-item"> 
              <div class="flex"> 
                <div class="left"><input type="checkbox"> Сиде,<span class="gray">Турция</span></div> 
                <div class="right"><span class="price">от 19 959 р./чел.</span></div> 
              </div> 
            </li> 
            <div> 
              <hr> 
              <h6 class="dropdown-header">Остальные курорты</h6> 
              <hr> 
            </div> 
            <li class="list-group-item"><input type="checkbox"> Анкара,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Даламан,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Дидим,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Каппадокия,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Кушадасы,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Манавгат,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Мугла,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Олюдениз,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Памуккале,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Саригерме,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Стамбул,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Фетхие,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Финике,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Чешме,<span class="gray">Турция</span></li> 
            <li class="list-group-item"><input type="checkbox"> Эрджияс,<span class="gray">Турция</span></li> 
          </ul> 
        </form> 
      </div> 
      <!-- 
  --> 
      <div class="btn-group"> 
        <button type="button" class="btn btn-light btn-lgg" style="margin-left:-60px;data-toggle=" dropdown "> 
      <i class="fas fa-calendar-alt "style="margin-left:-140px;font-size:22px;color:#059bce; ""></i> 
     </button> 
      </div> 
      <!-- 
    --> 
      <div class="btn-group"> 
        <button type="button" class="btn btn-light btn-lgg" data-toggle="dropdown">Test 3</button> 
        <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Separated link</a></li> 
        </ul> 
      </div> 
      <!-- 
--> 
      <div class="btn-group"> 
        <button type="button" class="btn btn-light btn-lgg" data-toggle="dropdown">Test 3</button> 
        <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Separated link</a></li> 
        </ul> 
      </div> 
    </div> 
  </div> 
  </div> 
  </div> 
  <div class="row2" style="margin-left:-41.5%; margin-top:-6.0%;margin:display;"> 
    <div class="container"> 
      <div class="btn-group" <div class="dropdown"> 
        <button type="button" class="btn btn-white  btn-lgggg" data-toggle="dropdown">Город вылета: </button> 
        <ul class="dropdown-menu" style="min-width:280px;" role="City"> 
          <li><a href="#">Москва</a></li> 
          <li><a href="#">Санкт-Петербург</a></li> 
          <li><a href="#">Абакан</a></li> 
          <li><a href="#">Астрахань</a></li> 
          <li><a href="#">Барнаул</a></li> 
          <li><a href="#">Белгород</a></li> 
          <li><a href="#">Благовещенск</a></li> 
          <li><a href="#">Брянск</a></li> 
          <li><a href="#">Владивосток</a></li> 
          <li><a href="#">Владикавказ</a></li> 
          <li><a href="#">Волгоград</a></li> 
          <li><a href="#">Воронеж</a></li> 
          <li><a href="#">Екатеринбург</a></li> 
          <li><a href="#">Новосибирск</a></li> 
          <li><a href="#">Нальчик</a></li> 
          <li><a href="#">Мурманск</a></li> 
          <li><a href="#">Нижний Новгород</a></li> 
        </ul> 
      </div> 
    </div> 
  </div> 
  <button type="button" class="btn btn-warning btn-lgggg" style="margin-left:610px; margin-top:-65px;">Горящие туры <span class="tab-search-hot-tours-discount">-50%</span></button> 
 
  <!-- jQuery --> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
  <!-- Latest compiled and minified JavaScript --> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 
 
</html>

Answer 1

Конечно ничего не понятно, но вот пример кода, чтобы кнопки были адаптивными, надеюсь помог.

<div class="flex">
    <button class="btn">Кнопка</button>
    <button class="btn">Кнопка</button>
    <button class="btn">Кнопка</button>
    <button class="btn">Кнопка</button>
    <button class="btn">Кнопка</button>
</div>

СSS:

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

Сами кнопки, думаю вы сами стилизуете, а вот пример как работают флексбоксы, чтобы кнопки, при изменении ширины экрана становились друг за другом, можете для удобства каждую кнопку обернуть в div. К сожалению полный ответ тяжело дать, так как структура html не очень правильная, а так цель задачи была выполнена.