时间戳

首页 > 解决方案 > 如何使跨度输入组文本在html中具有相同的大小？

html - 如何使跨度输入组文本在html中具有相同的大小？

问题描述

我想让输入组文本的跨度具有相同的大小？我已经把它w-100放在了跨度类中，但它不起作用。我该如何解决 ？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-6">
  <div class="form-group">
    <label>Facebook</label>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text w-100" style="background-color:#ddd;">https://www.facebook.com/</span>
      </div>
      <input type="text" class="form-control" aria-describedby="basic-addon3">
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Instagram</label>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text w-100" style="background-color:#ddd;">https://www.instagram.com/</span>
      </div>
      <input type="text" class="form-control" aria-describedby="basic-addon3">
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Twitter</label>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text w-100" style="background-color:#ddd;">https://www.twitter.com/</span>
      </div>
      <input type="text" class="form-control" aria-describedby="basic-addon3">
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Youtube</label>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text w-100" style="background-color:#ddd;">https://www.youtube.com/</span>
      </div>
      <input type="text" class="form-control" aria-describedby="basic-addon3">
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>TikTok</label>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text w-100" style="background-color:#ddd;">https://www.tiktok.com/</span>
      </div>
      <input type="text" class="form-control" aria-describedby="basic-addon3">
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Other</label>
    <input type="text" class="form-control" />
  </div>
</div>

标签： htmlcss

解决方案

使用min-width或width用于.input-group-prepend

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-6">
  <div class="form-group">
    <label>Facebook</label>
    <div class="input-group mb-3">
      <div class="input-group-prepend w-50 d-inline-block">
        <span class="input-group-text  w-100" style="background-color:#ddd;">https://www.facebook.com/</span>
      </div>
      <input type="text" class="form-control" aria-describedby="basic-addon3">
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Instagram</label>
    <div class="input-group mb-3">
      <div class="input-group-prepend w-50 d-inline-block">
        <span class="input-group-text  w-100" style="background-color:#ddd;">https://www.instagram.com/</span>
      </div>
      <input type="text" class="form-control" aria-describedby="basic-addon3">
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Twitter</label>
    <div class="input-group mb-3">
      <div class="input-group-prepend w-50 d-inline-block">
        <span class="input-group-text  w-100" style="background-color:#ddd;">https://www.twitter.com/</span>
      </div>
      <input type="text" class="form-control" aria-describedby="basic-addon3">
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Youtube</label>
    <div class="input-group mb-3">
      <div class="input-group-prepend w-50 d-inline-block">
        <span class="input-group-text  w-100" style="background-color:#ddd;">https://www.youtube.com/</span>
      </div>
      <input type="text" class="form-control" aria-describedby="basic-addon3">
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>TikTok</label>
    <div class="input-group mb-3">
      <div class="input-group-prepend w-50 d-inline-block">
        <span class="input-group-text w-100" style="background-color:#ddd;">https://www.tiktok.com/</span>
      </div>
      <input type="text" class="form-control" aria-describedby="basic-addon3">
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Other</label>
    <input type="text" class="form-control" />
  </div>
</div>

推荐阅读