主页 / 问题 / 853138
Accepted
ZELIBOBA
Asked:2020-07-11 19:00:02 +0800 CST2020-07-11 19:00:02 +0800 CST

flexbox - 将块包装到新行

  • 772

max-width:480px如何使块在小屏幕上换отправить行（例如）？

.input-group{
display:flex;
flex-direction: row;
}
.modal-form {
    width: 100%;
    height: 100%;
    display:flex;
}
.modal-input-text{
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
.send-number {
    background-color: #BF4832;
    border-radius: .25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 7px 10px 0px 10px;
    color: white;
    cursor: pointer;
    }
        <div class="input-group mb-3 modal-input">
          <div class="input-group-prepend modal-form">
            <span class="input-group-text modal-input-text" id="basic-addon1">+380</span>
            <input type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1">
            <div class="send-number">Отправить</div>
          </div>

html

2 个回答

  1. Best Answer

    在 .modal-form 中，我们添加了一个包装元素的规则：

    .modal-form {
    flex-wrap: wrap;
}

    然后，如果它的内容不适合 flexbox，它将移动到下一行。为了完全信任传输，您可以添加一个 @media 查询，将按钮从父级拉伸 100% 的宽度：

    @media screen and (max-width: 480px) {
  .send-number {
    width: 100%;
  }
}
    • 3

  2. 例如，将inputand包裹span在一个公共块 + set .modal-form { display: block; }go中.modal-form { flex-flow: column nowrap; }：

    .input-group{
display:flex;
flex-direction: row;
}
.modal-form {
    width: 100%;
    height: 100%;
    display:flex;
}
.modal-input-text{
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
.send-number {
    background-color: #BF4832;
    border-radius: .25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 7px 10px 0px 10px;
    color: white;
    cursor: pointer;
}

.modal-form label {
  display: flex;
}

@media screen and (max-width: 480px){
  .modal-form {
    display: block;
  }
  
  .form-control {
    display: block;
    width: 100%;
  }
}
      <div class="input-group-prepend modal-form">
    <label>
      <span class="input-group-text modal-input-text" id="basic-addon1">+380</span>
      <input type="text" class="form-control" placeholder="" aria-label="Username" aria-describedby="basic-addon1">
    </label>
    <div class="send-number">Отправить</div>
  </div>

    • 2

相关问题