Html 对齐单选按钮引导

Html 对齐单选按钮引导,html,bootstrap-4,Html,Bootstrap 4,我是一个非常新的前端开发,我只是试图创建一个样本网站。我使用了我的模板引导,我目前有麻烦对齐单选按钮上。下面是代码示例: <div class="row"> <div class="col"> <p class="h5 mt-4 mb-4">Production Machine</p> <div class="custom-control custom-r

我是一个非常新的前端开发,我只是试图创建一个样本网站。我使用了我的模板引导,我目前有麻烦对齐单选按钮上。下面是代码示例:

<div class="row">
            <div class="col">
                <p class="h5 mt-4 mb-4">Production Machine</p>
                <div class="custom-control custom-radio col-md-10">
                    <input type="radio" class="custom-control-input" id="desktop" name="prodMachine">
                    <label class="custom-control-label" for="desktop">Desktop Machine</label>
                </div>
                <div class="custom-control custom-radio col-md-10">
                    <input type="radio" class="custom-control-input" id="laptop" name="prodMachine">
                    <label class="custom-control-label" for="laptop">Laptop Machine</label>
                </div>
            </div>
            <!--Transportation Availability-->
            <div class="col col-sm">
                <p class="h5 mt-4 mb-4">Transportation Availability</p>
                <div class="custom-control custom-radio col-md-10">
                    <input type="radio" class="custom-control-input" id="massTranspo" name="transpoAvail">
                    <label class="radio custom-control-label" for="massTranspo">Mass Transporation</label>
                </div>
                <div class="custom-control custom-radio col-md-10">
                    <input type="radio" class="custom-control-input" id="privateVehicle" name="transpoAvail">
                    <label class="custom-control-label" for="privateVehicle">Private Vehicle</label>
                </div>
            </div>
        </div>

生产机器

台式机 笔记本电脑 运输可用性

质量运输 私家车
我似乎无法对齐标签。以下是本节的sc:

是我做错了什么还是我错过了什么


如有任何建议,将不胜感激。:)

您的标签与bootstrap 4.5.0对齐。请运行代码段

编辑1:添加
以包装代码。未对齐是由于添加到表单中的
文本中心
类造成的。拆下它,错位问题就消失了


生产机器

台式机 笔记本电脑 运输可用性

质量运输 私家车
您的标签与bootstrap 4.5.0对齐。请运行代码段

编辑1:添加
以包装代码。未对齐是由于添加到表单中的
文本中心
类造成的。拆下它,错位问题就消失了


生产机器

台式机 笔记本电脑 运输可用性

质量运输 私家车
Hi。我在代码中使用MDB模板:我曾尝试添加您提供的样式表和脚本,但我遇到了相同的问题。此代码实际上位于
类中。不确定这是否对它有影响。@Yay是的。未对齐问题是由于表单标签中的class
文本中心
引起的。移除它,错位问题就会消失。哦,哇,这真是个好办法!非常感谢你的帮助。我在代码中使用MDB模板:我曾尝试添加您提供的样式表和脚本,但我遇到了相同的问题。此代码实际上位于
类中。不确定这是否对它有影响。@Yay是的。未对齐问题是由于表单标签中的class
文本中心
引起的。移除它,错位问题就会消失。哦,哇,这真是个好办法!非常感谢你的帮助。