Bootstrap 4 пользовательских радио с меткой перед входом - PullRequest
0 голосов
/ 04 апреля 2019

Мне нужна помощь с этим макетом - ссылка .

<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. выровняйте левый блок пользовательского радио справа от изображения

Кажется, я просто не могу переопределить стилевое оформление boottrap для пользовательских радиостанций

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...