在输入之前引导带有标签的4个自定义无线电

时间:2019-04-03 23:21:36

标签: css forms bootstrap-4

我需要有关此布局的帮助-link。     

<div class="col-md-3" style="border:1px solid red;"></div>

<div class="col-md-6"  style="border:1px solid green;">
    <div class="row">
        <div class="col-md-4 float-right" style="border:1px solid red;">
            <div class="custom-control custom-radio">
                <input id="IDCapacidadeMovBracoDir1" name="IDCapacidadeMovBracoDir" type="radio" value="S" class="custom-control-input" required="">
                <label class="custom-control-label" for="IDCapacidadeMovBracoDir1">Não consegue</label>
            </div>
            <div class="custom-control custom-radio">
                <input id="IDCapacidadeMovBracoDir2" name="IDCapacidadeMovBracoDir" type="radio" value="S" class="custom-control-input" required="">
                <label class="custom-control-label" for="IDCapacidadeMovBracoDir2">Pouco</label>
            </div>
            <div class="custom-control custom-radio">
                <input id="IDCapacidadeMovBracoDir3" name="IDCapacidadeMovBracoDir" type="radio" value="S" class="custom-control-input" required="">
                <label class="custom-control-label" for="IDCapacidadeMovBracoDir3">Até meio</label>
            </div>
            <div class="custom-control custom-radio">
                <input id="IDCapacidadeMovBracoDir4" name="IDCapacidadeMovBracoDir" type="radio" value="S" class="custom-control-input" required="">
                <label class="custom-control-label" for="IDCapacidadeMovBracoDir4">Quase completamente</label>
            </div>
            <div class="custom-control custom-radio">
                <input id="IDCapacidadeMovBracoDir5" name="IDCapacidadeMovBracoDir" type="radio" value="S" class="custom-control-input" required="">
                <label class="custom-control-label" for="IDCapacidadeMovBracoDir5">Completamente</label>
            </div>
        </div>

        <div class="col-md-4 justify-content-center align-items-center" style="border:1px solid green;">
            <img src="https://image.shutterstock.com/image-vector/human-body-vector-silhouette-illustration-260nw-1248943483.jpg" class="img-fluid">
        </div>

        <div class="col-md-4" style="border:1px solid blue;">
            <div class="custom-control custom-radio">
                <input id="IDCapacidadeMovBracoEsq1" name="IDCapacidadeMovBracoEsq" type="radio" value="S" class="custom-control-input" required="">
                <label class="custom-control-label" for="IDCapacidadeMovBracoEsq1">Não consegue</label>
            </div>
            <div class="custom-control custom-radio">
                <input id="IDCapacidadeMovBracoEsq2" name="IDCapacidadeMovBracoEsq" type="radio" value="S" class="custom-control-input" required="">
                <label class="custom-control-label" for="IDCapacidadeMovBracoEsq2">Pouco</label>
            </div>
            <div class="custom-control custom-radio">
                <input id="IDCapacidadeMovBracoEsq3" name="IDCapacidadeMovBracoEsq" type="radio" value="S" class="custom-control-input" required="">
                <label class="custom-control-label" for="IDCapacidadeMovBracoEsq3">Até meio</label>
            </div>
            <div class="custom-control custom-radio">
                <input id="IDCapacidadeMovBracoEsq4" name="IDCapacidadeMovBracoEsq" type="radio" value="S" class="custom-control-input" required="">
                <label class="custom-control-label" for="IDCapacidadeMovBracoEsq4">Quase completamente</label>
            </div>
            <div class="custom-control custom-radio">
                <input id="IDCapacidadeMovBracoEsq5" name="IDCapacidadeMovBracoEsq" type="radio" value="S" class="custom-control-input" required="">
                <label class="custom-control-label" for="IDCapacidadeMovBracoEsq5">Completamente</label>
            </div>
        </div>
    </div>
</div>

<div class="col-md-3"  style="border:1px solid blue;"></div>

我正在尝试:

  1. 让左侧的自定义收音机在输入之前带有标签,以便它们镜像右侧的自定义收音机块
  2. 在图像附近将左侧的自定义电台块对齐到右侧

我似乎无法覆盖bootstrap样式化的自定义半径

谢谢

0 个答案:

没有答案