如何使 2 个内嵌按钮具有相同的高度答案

【问题标题】：How to make 2 in-line buttons have the same height如何使 2 个内嵌按钮具有相同的高度
【发布时间】：2020-12-01 17:04:29
【问题描述】：

我在下面附上一个片段，如您所见，两个按钮显示不同的高度，我希望它们在我更改页面大小时具有相同的高度，并且在同一行。

我不想只说高度：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>

非常感谢您的帮助。

【问题讨论】：

你可以使用white-space: nowrap nowrap 到你的按钮高度
@Adhitya TY 为您回复！我应该把“空白：nowrap”放在哪里？我认为它不起作用..
进入你的.dropbtn css，你可以试试
是的，没错，你只需要在两个按钮中调整响应，后面我再举个例子。
@Stracci 下面的答案是正确的？？

标签： html css twitter-bootstrap-3

【解决方案1】：

你可以使用引导容器：

    <!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/

【讨论】：

我认为这不起作用......当我用“文件：2019717_1828_FMCI_107.txt 设备 107”替换按钮中的“主要”文本时，按钮的高度会不同。
@Stracci 删除你所有的类和样式
我正在尝试使用您的 jsfiddle 代码，但当我将其中一个按钮名称更改为 File: 2019717_1828_FMCI_107.txt Device 107 时它不起作用：(