css - 在Bootstrap列中需要帮助

我正在尝试写一个地址字段。我想在城市和邮政编码的右侧添加“州和国家/地区”字样。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="col-sm-12 col-md-6 col-lg-6">

  <div class="need-info">
    <p class="info-title">Enter Your Address.</p>
    <input type="text" class="form-control" placeholder="Address line 1.">
  </div>

  <div class="need-info">
    <input type="text" class="form-control" placeholder="Address line 2.">
  </div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
  <div class="need-info">
    <input type="text" class="form-control" placeholder="City">
  </div>
  <div class="need-info">
    <input type="number" class="form-control" placeholder="Postal Code">
  </div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
  <div class="need-info">
    <input type="text" class="form-control" placeholder="State">
  </div>
  <div class="need-info">
    <input type="text" class="form-control" placeholder="Country">
  </div>
</div>

最佳答案

对现有代码进行细微调整以获得所需的内容...


小尺寸，占据全部12列
其他6列，邮政编码，城市，国家和州

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="col-sm-12 col-md-12 ">

  <div class="need-info">
    <p class="info-title">Enter Your Address.</p>
    <input type="text" class="form-control" placeholder="Address line 1.">
  </div>

  <div class="need-info">
    <input type="text" class="form-control" placeholder="Address line 2.">
  </div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
  <div class='row'>
    <div class="col-12 col-sm-6">
      <div class="need-info">
        <input type="text" class="form-control" placeholder="City">
      </div>
    </div>
    <div class="col-12 col-sm-6 ">
      <div class="need-info">
        <input type="text" class="form-control" placeholder="state">
      </div>
    </div>
    <div class="col-12 col-sm-6 ">
      <div class="need-info">
        <input type="text" class="form-control" placeholder="postal code">
      </div>
    </div>
    <div class="col-12 col-sm-6 ">
      <div class="need-info">
        <input type="text" class="form-control" placeholder="country">
      </div>

    </div>

  </div>
</div>

关于css - 在Bootstrap列中需要帮助，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58498592/