对齐问题和Bootstrap按钮修改

2ic8powd  于 2023-02-27  发布在  Bootstrap
关注(0)|答案(3)|浏览(155)

我有一个定制的设计使：

当前实现如下所示：

我怎样才能使第一个按钮命名为manedlig捐赠和enkel捐赠有箭头指针使用CSS？我也无法使相同的水平对齐，他们看起来错位。
我的代码是：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo form</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <!-- jQuery UI autocomplete CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
        integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw=="
        crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins" />

    <style>
        /* Overriding Styles */
        .radio-toolbar {
            margin: 10px 0px;
        }

        .radio-toolbar input[type="radio"] {
            opacity: 0;
            /* position: fixed; */
            width: 0;
        }

        .radio-toolbar label {
            display: inline-block;
            background-color: white;
            padding: 5px 22px;
            font-family: sans-serif, Arial;
            font-size: 16px;
            border: 1px solid #E7E7E7;
            border-radius: 0px;
        }

        .radio-toolbar label:hover {
            background-color: #E7E7E7;
        }

        /* .radio-toolbar input[type="radio"]:focus+label {
            border: 2px dashed #444;
        } */

        .radio-toolbar input[type="radio"]:checked+label {
            background-color: #C8951C;
            color: white;
            border: none;
        }

        #basic-addon2 {
            background-color: white;
        }

        input[type="text"] {
            text-align: center;
        }

        #amount::placeholder {

            /* Firefox, Chrome, Opera */
            text-align: center;
            margin-left: 20px !important;
        }

        input {
            border-radius: 0
        }

        .custom-btn {
            position: relative;
            display: inline-block;
            width: auto;
            height: auto;
            background-color: transparent;
            border: none;
            cursor: pointer;
            min-width: 150px;
        }

        .custom-btn span {
            position: relative;
            display: inline-block;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px 20px;
            transition: 0.3s;
        }

        .custom-btn-2::before {
            background-color: #C8951C;
            transition: 0.3s ease-out;
        }

        .custom-btn-2 span {
            color: #C8951C;
            border: 1px solid #C8951C;
            transition: 0.2s;
        }

        .custom-btn-2 span:hover {
            color: rgb(255, 255, 255);
            background-color: #C8951C;
            transition: 0.2s 0.1s;
        }

        .custom-btn.hover-opacity::before {
            top: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
        }

        .custom-btn.hover-opacity:hover::before {
            opacity: 1;
        }
    </style>
</head>

<body style="background-color: #fbf9f7;">
    <div class="container-fluid text-center">
        <div class="row">
            <div class="col-md-6 mx-auto mt-2">
                <form id="form_submit">
                    <div class="radio-toolbar mb-5">
                        <input type="radio" id="monthly" name="frekvens" value="monthly" checked>
                        <label for="monthly">Månedlig donation</label>

                        <input type="radio" id="one-time" name="frekvens" value="one-time">
                        <label for="one-time">Enkel donation</label>
                    </div>
                    <div class="radio-toolbar" id="monthly-donation-block">
                        <input type="radio" id="amount-29" name="monthly-belob" value="29">
                        <label for="amount-29">29 DKK</label>

                        <input type="radio" id="amount-49" name="monthly-belob" value="49" checked>
                        <label for="amount-49">49 DKK</label>

                        <input type="radio" id="amount-79" name="monthly-belob" value="79">
                        <label for="amount-79">79 DKK</label>
                    </div>
                    <div class="radio-toolbar" id="one-time-donation-block" style="display: none;">
                        <input type="radio" id="amount-99" name="one-time-belob" value="99">
                        <label for="amount-99">99 DKK</label>

                        <input type="radio" id="amount-149" name="one-time-belob" value="149" checked>
                        <label for="amount-149">149 DKK</label>

                        <input type="radio" id="amount-199" name="one-time-belob" value="199">
                        <label for="amount-199">199 DKK</label>
                    </div>
                    <div class="input-group mb-5">
                        <input type="text" class="form-control num-only auto-ok" id="belob" placeholder="Valgfrit beløb"
                            aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <span class="input-group-text" id="basic-addon2">DKK</span>
                        <div id="belob-feedback" class="invalid-feedback">
                            Incorrect Number
                        </div>
                    </div>
                    <div class="mb-3">
                        <input type="text" class="form-control num-only" id="phone" placeholder="Telefonnummer" required
                            maxlength="10">
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="custom-btn custom-btn-2 hover-opacity">
                            <span>FORTSÆT</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<!-- These two are required unless jQuery & bootstrap is already included -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
    integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
    crossorigin="anonymous"></script>
<!-- This is required for autocomplete api -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdn.dataforsyningen.dk/dawa/assets/dawa-autocomplete2/1.0.2/dawa-autocomplete2.min.js"></script>
<!-- this is required for debounce delay of input field -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
    integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"
    integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"
    integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ=="
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.16/dist/sweetalert2.all.min.js"></script>
</html>

(Font类型可以被忽略）。

twitter-bootstrap

3条答案

按热度按时间
hwazgwia

hwazgwia1#

可以添加::after来创建指针

.radio-toolbar input[type="radio"]:checked+label.with-pointer::after {
        content: '';
        width: 16px;
        height: 16px;
        background: #C8951C;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: -1;
        transform: translate(-50%, 8px) rotate(
45deg);
      }

此外，对齐可以通过容器上的挠曲特性来实现：
查看完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo form</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <!-- jQuery UI autocomplete CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
        integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw=="
        crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins" />

    <style>
        /* Overriding Styles */
        .radio-toolbar {
          margin: 10px 0px;
          display: flex;
        }

        .radio-toolbar input[type="radio"] {
            opacity: 0;
            /* position: fixed; */
            width: 0;
        }

        .radio-toolbar label {
            display: inline-block;
            background-color: white;
            padding: 5px 22px;
            font-family: sans-serif, Arial;
            font-size: 16px;
            border: 1px solid #E7E7E7;
            border-radius: 0px;
            flex:1;
            margin-right: 8px;
        }
      
      .radio-toolbar label:last-child {
        margin-right: 0;
      }

        .radio-toolbar label:hover {
            background-color: #E7E7E7;
        }

        /* .radio-toolbar input[type="radio"]:focus+label {
            border: 2px dashed #444;
        } */

        .radio-toolbar input[type="radio"]:checked+label {
            background-color: #C8951C;
            color: white;
            border: none;
            position: relative;
        }

      .radio-toolbar input[type="radio"]:checked+label.with-pointer::after {
        content: '';
        width: 16px;
        height: 16px;
        background: #C8951C;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: -1;
        transform: translate(-50%, 8px) rotate(
45deg);
      }
      
     
        #basic-addon2 {
            background-color: white;
        }

        input[type="text"] {
            text-align: center;
        }

        #belob::placeholder {

            /* Firefox, Chrome, Opera */
            margin-left: -58px !important;
        }

        input {
            border-radius: 0
        }

        .custom-btn {
            position: relative;
            display: inline-block;
            width: auto;
            height: auto;
            background-color: transparent;
            border: none;
            cursor: pointer;
            min-width: 150px;
padding: 0px;
        }

        .custom-btn span {
            position: relative;
            display: inline-block;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px 20px;
            transition: 0.3s;
        }

        .custom-btn-2::before {
            background-color: #C8951C;
            transition: 0.3s ease-out;
        }

        .custom-btn-2 span {
            color: #C8951C;
            border: 1px solid #C8951C;
            transition: 0.2s;
        }

        .custom-btn-2 span:hover {
            color: rgb(255, 255, 255);
            background-color: #C8951C;
            transition: 0.2s 0.1s;
        }

        .custom-btn.hover-opacity::before {
            top: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
        }

        .custom-btn.hover-opacity:hover::before {
            opacity: 1;
        }
    </style>
</head>

<body style="background-color: #fbf9f7;">
    <div class="container-fluid text-center">
        <div class="row">
            <div class="col-md-6 mx-auto mt-2">
                <form id="form_submit">
                    <div class="radio-toolbar mb-5">
                        <input type="radio" id="monthly" name="frekvens" value="monthly" checked>
                        <label for="monthly" class="with-pointer">Månedlig donation</label>

                        <input type="radio" id="one-time" name="frekvens" value="one-time">
                        <label for="one-time" class="with-pointer">Enkel donation</label>
                    </div>
                    <div class="radio-toolbar" id="monthly-donation-block">
                        <input type="radio" id="amount-29" name="monthly-belob" value="29">
                        <label for="amount-29">29 DKK</label>

                        <input type="radio" id="amount-49" name="monthly-belob" value="49" checked>
                        <label for="amount-49">49 DKK</label>

                        <input type="radio" id="amount-79" name="monthly-belob" value="79">
                        <label for="amount-79">79 DKK</label>
                    </div>
                    <div class="radio-toolbar" id="one-time-donation-block" style="display: none;">
                        <input type="radio" id="amount-99" name="one-time-belob" value="99">
                        <label for="amount-99">99 DKK</label>

                        <input type="radio" id="amount-149" name="one-time-belob" value="149" checked>
                        <label for="amount-149">149 DKK</label>

                        <input type="radio" id="amount-199" name="one-time-belob" value="199">
                        <label for="amount-199">199 DKK</label>
                    </div>
                    <div class="input-group mb-5">
                        <input type="text" class="form-control num-only auto-ok" id="belob" placeholder="Valgfrit beløb"
                            aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <span class="input-group-text" id="basic-addon2">DKK</span>
                        <div id="belob-feedback" class="invalid-feedback">
                            Incorrect Number
                        </div>
                    </div>
                    <div class="mb-3">
                        <input type="text" class="form-control num-only" id="phone" placeholder="Telefonnummer" required
                            maxlength="10">
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="custom-btn custom-btn-2 hover-opacity">
                            <span>FORTSÆT</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<!-- These two are required unless jQuery & bootstrap is already included -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
    integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
    crossorigin="anonymous"></script>
<!-- This is required for autocomplete api -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdn.dataforsyningen.dk/dawa/assets/dawa-autocomplete2/1.0.2/dawa-autocomplete2.min.js"></script>
<!-- this is required for debounce delay of input field -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
    integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"
    integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"
    integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ=="
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.16/dist/sweetalert2.all.min.js"></script>
</html>
赞(0）分享  回复(0）举报  2023-02-27
dz6r00yl

dz6r00yl2#

对于指针箭头，您可以使用CSS边框：

button {position:relative; padding:10px; background:orange; color:#fff; border:none;}
button:before {
    content:''; position:absolute; top:100%; left:50%;
    transform:translateX(-50%);
    width: 0;
    height: 0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:15px solid orange;
}
<button>Button</button>

我不知道你说的"水平对齐"是什么意思？

赞(0）分享  回复(0）举报  2023-02-27
lp0sw83n

lp0sw83n3#

对于这些需求可能有很多解决方案。我已经为按钮设计做了一个部分例子。你可以去看看。
花柱

/* Overriding Styles */
.radio-toolbar {
  margin: 10px 0px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  /* position: fixed; */
  width: 0;
}

.radio-toolbar label {
  display: inline-block;
  background-color: white;
  padding: 5px 22px;
  font-family: sans-serif, Arial;
  font-size: 16px;
  border: 1px solid #E7E7E7;
  border-radius: 0px;
  position: relative;
  z-index: 5;
}

.radio-toolbar label:hover {
  background-color: #E7E7E7;
}

/* .radio-toolbar input[type="radio"]:focus+label {
border: 2px dashed #444;
} */

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #C8951C;
  color: white;
  border: none;
}
.btn-color{
  display: flex;
  justify-content: center;
}
.arrow{
  position: absolute;
  width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid #c8951c;
  z-index: 0;
}
<div class="radio-toolbar mb-5">
  <div class="row">
    <div class="btn-color">
        <input type="radio" id="monthly" name="frekvens" value="monthly" checked>
        <label for="monthly" class="button-month">
          Månedlig donation
        </label>
        <span class="arrow"></span>
    </div>
  </div>
</div>

https://codepen.io/njmsaikat/pen/gOXYzBe

赞(0）分享  回复(0）举报  2023-02-27
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com