在Bootstrap列中需要帮助

时间:2019-10-22 06:53:26

标签: css bootstrap-4

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

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

2 个答案:

答案 0 :(得分:1)

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

  • 小巧,占据全部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>

答案 1 :(得分:0)

尝试这种结构。

keytool -genkey -alias foo -keystore cacerts -dname cn=test -storepass changeit -keypass changeit