搜索
搜索

网格布局中引导按钮组的定位

Chris Doyle 发表于 Dev
23
克里斯·道尔

我怎样才能让我的引导按钮组在列中排列。我正在布置一个问题和多项选择的答案，我希望问题和答案在同一条线上。我试图让问题和列中的所有答案字段排列在一起，并且按钮都应该伸展到与该行上该问题的其他答案相同的高度。

我玩过各种格式的行、列和组，但没有成功。当按比例缩小时，列看起来更好，但在全视图中按钮对齐关闭并且它们没有正确填充列

在此处输入图片说明

<!DOCTYPE html>
<html lang="en">
<head>
    <title>bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

</head>
<body>
<div class="container-fluid">
    <form action="home.html" method="post">
        <div class="card">
            <div class="card-header bg-primary text-light text-center">Development</div>
            <div class="card-body">
                <div class="btn-group " role="group" aria-label="Basic radio toggle button group">
                    <div class="text-primary col">
                        This is a question 1
                    </div>
                    <div class="col">
                        <input type="radio" class="btn-check active" name="devq1" value="a1" id="dq1a1" checked>
                        <label class="btn btn-outline-primary" for="dq1a1">No version control or used
                            infrequent</label>
                    </div>
                    <div class="col">
                        <input type="radio" class="btn-check" name="devq1" value="a2" id="dq1a2">
                        <label class="btn btn-outline-primary" for="dq1a2">Version control on all source code</label>
                    </div>
                    <div class="col">
                        <input type="radio" class="btn-check" name="devq1" value="a3" id="dq1a3">
                        <label class="btn btn-outline-primary" for="dq1a3">Version control on all source code and
                            library and artificats</label>
                    </div>
                </div>
                <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                    <div class="text-primary col">
                        This is question 2
                    </div>
                    <div class="col">
                        <input type="radio" class="btn-check" name="devq2" value="b1" id="dq2a1" checked>
                        <label class="btn btn-outline-primary" for="dq2a1">Manual deployment process</label>
                    </div>
                    <div class="col">
                        <input type="radio" class="btn-check" name="devq2" value="b2" id="dq2a2">
                        <label class="btn btn-outline-primary" for="dq2a2">Partially automated deployment
                            process</label>
                    </div>
                    <div class="col">
                        <input type="radio" class="btn-check" name="devq2" value="b3" id="dq2a3"
                               autocomplete="off">
                        <label class="btn btn-outline-primary" for="dq2a3">Fully automated deployment process</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header bg-primary text-light text-center">Process</div>
            <div class="card-body">
                <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                    <div class="text-primary col">
                        This is question 3
                    </div>
                    <div class="col">
                        <input type="radio" class="btn-check" name="processq1" value="a1" id="pq1a1" checked>
                        <label class="btn btn-outline-primary" for="pq1a1">Big work batch size and releases on a
                            monthly
                            basis or longer</label>
                    </div>
                    <div class="col">
                        <input type="radio" class="btn-check" name="processq1" value="a2" id="pq1a2">
                        <label class="btn btn-outline-primary" for="pq1a2">Work batch size optimized for weekly
                            releases, but deployment frequency not in sync with business requirements (e.g lead
                            time)</label>
                    </div>
                    <div class="col">
                        <input type="radio" class="btn-check" name="processq1" value="a3" id="pq1a3">
                        <label class="btn btn-outline-primary" for="pq1a3">Work batch size optimized for frequent
                            releases and deployment frequency in sync with business requirements (e.g. lead
                            time)</label>
                    </div>
                </div>
                <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                    <div class="text-primary col">
                        This is question 4
                    </div>
                    <div class="col">
                        <input type="radio" class="btn-check" name="processq2" value="b1" id="pq2a1" checked>
                        <label class="btn btn-outline-primary" for="pq2a1">Change approval needed from multiple
                            parties
                            outside the team</label>
                    </div>
                    <div class="col">
                        <input type="radio" class="btn-check" name="processq2" value="b2" id="pq2a2">
                        <label class="btn btn-outline-primary" for="pq2a2">Change approval needed within the
                            team</label>
                    </div>
                    <div class="col">
                        <input type="radio" class="btn-check" name="processq2" value="b3" id="pq2a3">
                        <label class="btn btn-outline-primary" for="pq2a3">No change approval needed or change
                            approval
                            process totally automated which is really long to see what happens with the
                            buttons </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <input class="col-2 btn btn-primary" type="submit">
        </div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
</body>
</html>

克里斯·道尔

我已经使用.btn-toolbar对齐按钮组和问题解决了这个问题，并确保问题和按钮组的高度相同，并使用 col 对齐按钮和问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

</head>
<body>
<div class="container-fluid">
    <form action="home.html" method="post">
        <div class="card">
            <div class="card-header bg-primary text-light text-center">Development</div>
            <div class="card-body">
                <div class="btn-toolbar">
                    <div class="col-2 text-primary">This is a question 1</div>
                    <div class="btn-group col-10" role="group" aria-label="Basic radio toggle button group">
                        <input type="radio" class="btn-check active" name="devq1" value="a1" id="dq1a1" checked>
                        <label class="btn btn-outline-primary col-4" for="dq1a1">No version control or used
                            infrequent</label>
                        <input type="radio" class="btn-check" name="devq1" value="a2" id="dq1a2">
                        <label class="btn btn-outline-primary col-4" for="dq1a2">Version control on all source
                            code</label>
                        <input type="radio" class="btn-check" name="devq1" value="a3" id="dq1a3">
                        <label class="btn btn-outline-primary col-4" for="dq1a3">Version control on all source code and
                            library and artificats</label>
                    </div>
                </div>
                <div class="btn-toolbar">
                    <div class="col-2 text-primary">This is question 2</div>
                    <div class="btn-group col-10" role="group" aria-label="Basic radio toggle button group">
                        <input type="radio" class="btn-check" name="devq2" value="b1" id="dq2a1" checked>
                        <label class="btn btn-outline-primary col-4" for="dq2a1">Manual deployment process</label>
                        <input type="radio" class="btn-check" name="devq2" value="b2" id="dq2a2">
                        <label class="btn btn-outline-primary col-4" for="dq2a2">Partially automated deployment
                            process</label>
                        <input type="radio" class="btn-check" name="devq2" value="b3" id="dq2a3"
                               autocomplete="off">
                        <label class="btn btn-outline-primary col-4" for="dq2a3">Fully automated deployment
                            process</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header bg-primary text-light text-center">Process</div>
            <div class="card-body">
                <div class="btn-toolbar">
                    <div class="col-2 text-primary">This is question 3</div>
                    <div class="btn-group col-10" role="group" aria-label="Basic radio toggle button group">
                        <input type="radio" class="btn-check" name="processq1" value="a1" id="pq1a1" checked>
                        <label class="btn btn-outline-primary col-4" for="pq1a1">Big work batch size and releases on a
                            monthly
                            basis or longer</label>
                        <input type="radio" class="btn-check" name="processq1" value="a2" id="pq1a2">
                        <label class="btn btn-outline-primary col-4" for="pq1a2">Work batch size optimized for weekly
                            releases, but deployment frequency not in sync with business requirements (e.g lead
                            time)</label>
                        <input type="radio" class="btn-check" name="processq1" value="a3" id="pq1a3">
                        <label class="btn btn-outline-primary col-4" for="pq1a3">Work batch size optimized for frequent
                            releases and deployment frequency in sync with business requirements (e.g. lead
                            time)</label>
                    </div>
                </div>
                <div class="btn-toolbar">
                    <div class="col-2 text-primary">This is question 4</div>
                    <div class="btn-group col-10" role="group" aria-label="Basic radio toggle button group">
                        <input type="radio" class="btn-check" name="processq2" value="b1" id="pq2a1" checked>
                        <label class="btn btn-outline-primary col-4" for="pq2a1">Change approval needed from multiple
                            parties
                            outside the team</label>
                        <input type="radio" class="btn-check" name="processq2" value="b2" id="pq2a2">
                        <label class="btn btn-outline-primary col-4" for="pq2a2">Change approval needed within the
                            team</label>
                        <input type="radio" class="btn-check" name="processq2" value="b3" id="pq2a3">
                        <label class="btn btn-outline-primary col-4" for="pq2a3">No change approval needed or change
                            approval
                            process totally automated which is really long to see what happens with the
                            buttons </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <input class="col-2 btn btn-primary" type="submit">
        </div>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

引导网格布局

网格布局CSS中的按钮

引导网格布局问题

动态引导网格布局

如何定位CSS网格布局中的特定列或行？

如何在引导程序中设置网格布局样式？

无法修复网格布局中的4个按钮

猕猴桃网格布局中的按钮位置

从左到右列的引导网格布局

网格布局中的边框

网格布局内的按钮为空

如何在网格布局中定位最底部的容器

在Tkinter中显示网格布局单元

PrimeFaces中的面板网格布局

CSS 网格布局中的行重叠

CSS网格布局中的等高行

Bootstrap 3中的简单网格布局？

Qt - 网格布局中的标签重叠

网格布局中的空行可见

网格布局中的间距问题

了解zend中的网格布局

在 JPanel 中获得良好的网格布局

Android Studio：网格布局中的按钮更改模拟器中的大小

如何使用引导程序制作固定的网格布局？

引导网格布局以及其他框

使用砌体和引导程序的网格布局

我如何创建这个引导网格布局？

按钮组中的相对定位的引导程序下拉列表

在网格布局中创建动态按钮-创建魔术正方形UI

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    IE 11中的FormData未定义

  3. 3

    计算数据帧R中的字符串频率

  4. 4

    如何在R中转置数据

  5. 5

    如何使用Redux-Toolkit重置Redux Store

  6. 6

    Excel 2016图表将增长与4个参数进行比较

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

  9. 9

    OpenCv：改变 putText() 的位置

  10. 10

    ActiveModelSerializer仅显示关联的ID

  11. 11

    算术中的c ++常量类型转换

  12. 12

    如何开始为Ubuntu开发

  13. 13

    将加号/减号添加到jQuery菜单

  14. 14

    去噪自动编码器和常规自动编码器有什么区别？

  15. 15

    获取并汇总所有关联的数据

  16. 16

    OpenGL纹理格式的颜色错误

  17. 17

    在 React Native Expo 中使用 react-redux 更改另一个键的值

  18. 18

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  19. 19

    TreeMap中的自定义排序

  20. 20

    Redux动作正常，但减速器无效

  21. 21

    如何对treeView的子节点进行排序

热门标签

归档