Блог

Главная - Вопросы по программированию - Как сделать так, чтобы 2 встроенные кнопки имели одинаковую высоту

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

#html #css #twitter-bootstrap-3

#HTML #css #twitter-bootstrap-3

Вопрос:

Я прикрепляю фрагмент ниже, как вы можете видеть, 2 кнопки имеют разную высоту, я бы хотел, чтобы они имели одинаковую высоту при изменении размера страницы и находились на одной строке.

введите описание изображения здесь

Я не хочу просто говорить height: 100px, потому что, когда я открываю его на телефоне, он деформируется.

 <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <style>
    .dropbtn {
      background-color: #264653;
      border: none;
      color: white;
      padding: 0.1%;
      text-align: center;
      cursor: pointer;
      width: 100%;
      flex-grow: 1;
      display: block;
    }
    
    .dropdown {
      position: relative;
      display: block;
      width: 100%;
    }
  </style>
</head>

<body>
  <h1 align="center" style="padding-left: 20px; width: 100%">ANNOTATION TOOL</h1>
  <div style="width: 100%; height: 100%;" class="container-fluid">
    <div class="dropdown" style="width: 50%; float:left; height: 100%;">
      <button class="dropbtn" style="width: 100%; height:100%;"><h2>File: 2019717_1828_FMCI_107.txt Device 107 </h2> </button>
    </div>
    <div class="dropdown" style="width: 50%; float:right; height: 100%;">
      <button class="dropbtn" style="height: 100%;"><h2> Channel:0 <i class="fa fa-caret-down"></i></h2> </button></div>

</body>

Большое вам спасибо за вашу помощь.

Комментарии:

1. Вы можете использовать white-space: nowrap for nowrap для изменения высоты вашей кнопки

2. @Adhitya TY за ваш ответ! Куда я должен поместить «пробел: nowrap»? Я не думаю, что это работает..

3. В вашем .dropbtn css вы можете попробовать это

4. Да, это верно, вам нужно настроить адаптивность только двумя кнопками, позвольте мне привести пример после этого.

5. @Stracci Приведенный ниже ответ работает правильно??

Ответ №1:

для этого вы можете использовать контейнер bootstrap:

     <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Title</title>    

    </style>
    </head>
    <body>

    <h1 align="center" style="padding-left: 20px; width: 100%">ANNOTATION TOOL</h1>
    

    <div class="container">
  <div class="row">
    <div class="col-sm">
     <button type="button" class="btn btn-primary" style="width: 100% " >Primary</button>
    </div>
    <div class="col-sm">
      <button type="button" class="btn btn-primary" style="width: 100% "> Primary</button>
    </div>
  </div>
</div>
    <div style="width: 100%; height: 100%;" class="container-fluid">
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </body>
    </html>

проверьте: https://jsfiddle.net/pk78ntze /

Комментарии:

1. Я не думаю, что это работает… когда я заменяю на кнопках «Основной» текст на «Файл: 2019717_1828_FMCI_107.txt Устройство 107» кнопки становятся разной высоты.

2. @Stracci удалите все ваши классы и стили

3. Я пытаюсь использовать ваш код jsfiddle, и он не работает, когда я меняю одно из имен кнопок на File: 2019717_1828_FMCI_107.txt Устройство 107 : (

Метки: ,