堆栈内存溢出
  繁体   English   中英

Alignment 问题和引导按钮修改

[英]Alignment issue and bootstrap button modification

 原文  2022-01-24 16:42:07  1   3    html/ css/ twitter-bootstrap/ bootstrap-4

问题描述

嗨，我有一个定制设计要制作：

当前的实现如下所示：

如何使用 css 制作第一个名为 manedlig 捐赠和 enkel 捐赠的按钮以使用该箭头指针？ 我也无法制作相同的水平 alignment 并且它们看起来未对齐

我的代码是：

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

请帮忙！ 字体类型可以忽略

3 个解决方案

解决方案1
 1 已采纳  2022-01-24 17:10:55

您可以添加::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);
      }

alignment 也可以通过容器上的 flex 属性实现：

在此处查看完整代码： 

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

解决方案2
 0  2022-01-24 17:06:23

对于指针箭头，您可以使用 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>

我不确定您在说什么“水平对齐”？

解决方案3
 0  2022-01-24 18:23:52

这些要求可能有很多解决方案。 我为按钮设计做了一个部分示例。 你可以检查一下。

styles 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 引导中文本框和按钮的CSS对齐问题 CSS和Bootstrap的对齐问题 带有引导程序的日期选择器 alignment 问题 引导表单对齐问题 Bootstrap列对齐问题 引导水平 Alignment 问题 引导程序-对齐问题 Bootstrap表对齐问题 引导程序对齐问题 Bootstrap 4模式对齐问题
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM