css - 无法为包含输入组的按钮设置宽度为 0

Question

我正在制作这个演示。我不确定为什么我无法将 #input-box 的宽度设置为 0。我正在尝试隐藏此容器并将其宽度设置为所需大小的动画，但我无法将宽度正确设置为 0

body {
  padding: 30px;
}
#input-box{
      width:0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary" id="input-box">
  <div class="input-group m-0">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">Zip Zode</span>
  </div>
</div>
  
  </button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Answer 1

您还需要设置以下 CSS 属性:

body {
  padding: 30px;
}

#input-box {
  width: 0px;
  padding: 0;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary" id="input-box">
  <div class="input-group m-0">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">Zip Zode</span>
  </div>
</div>
  
  </button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>