如何使用 Bootstrap 分离表单无线电的元素？

jmp7cifd 于 2023-02-01 发布在 Bootstrap

关注(0)|答案(1)|浏览(169)

我试了上千种方法，但我还是找不到那个的样式和空格。我需要用 Bootstrap 。
我需要它看起来像

但我的是

我的代码是：

<!-- Cuarta fila  -->
<div class="col-6">
   <label for="creditc" class="form-label fw-bold">We accept:</label>
   <div>
      <input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1">
      <i class="fa-brands fa-cc-visa"></i>
      <input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1">
      <i class="fa-brands fa-cc-mastercard"></i>
      <input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1">
      <i class="fa-brands fa-cc-apple-pay"></i>
      <input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1">
      <i class="fa-brands fa-cc-amazon-pay"></i>
   </div>
</div>
<div class="col-6">
   <label for="city" class="form-label fw-bold">Message</label>
   <textarea class="form-control" style="overflow:auto;resize:none"></textarea>
   <small id="passwordHelpBlock" class="form-text text-muted">Add any notes here.</small>
</div>

我知道我没有任何样式代码应用现在或任何东西，但我已经尝试了排水沟，间距，颜色（英国广播公司次要）和没有工作。

twitter-bootstrap

来源：https://stackoverflow.com/questions/75274755/how-to-separate-the-elements-of-form-radios-using-bootstrap

1条答案

按热度按时间

ig9co6j11#

我创建了一个完整的代码作为例子，其实制作它的方法有很多;我选了最短最快的一条

.contain-brand{
  width: fit-content;
  background-color: #6d757c;
}

.fa-brands{color:#FFF;}

/*edit standard css bootstrap*/
.form-check-input{margin-top: 0!important;}

<!--CSS for style-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!--Code-->
<div class="container">
<div class="row">
<div class="col-6">
    <label for="creditc" class="form-label fw-bold">We accept:</label>
    <div class="contain-brand p-3 ms-0 rounded-1 row">
        <div class="col p-0 me-3 align-self-center">
            <input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1"><i class="fa-brands fa-cc-visa ms-1"></i>
        </div>
        <div class="col p-0 me-3 align-self-center">
            <input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1"><i class="fa-brands fa-cc-mastercard ms-1"></i>
        </div>
        <div class="col p-0 me-3 align-self-center">
            <input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1"><i class="fa-brands fa-cc-apple-pay ms-1"></i>
        </div>
        <div class="col p-0 me-2 align-self-center">
            <input class="form-check-input" type="radio" name="tarjeta1" id="tarjeta1"><i class="fa-brands fa-cc-amazon-pay ms-1"></i>
        </div>
    </div>
</div>
<div class="col-6">
    <label for="city" class="form-label fw-bold">Message</label>
    <textarea class="form-control" style="overflow:auto;resize:none"></textarea>
    <small id="passwordHelpBlock" class="form-text text-muted">Add any notes here.</small>
</div>
</div>
</div>

赞(0）回复(0）举报 2023-02-01

我来回答

如何使用 Bootstrap 分离表单无线电的元素？

1条答案

相关问题

热门标签

最新问答