开心每一天1111
添加带有选项类的 d-flex flex-column 类.row { background: #f8f9fa; margin-top: 20px;}.col { border: solid 1px #6c757d; padding: 10px;}// Fonts//@import url('https://fonts.googleapis.com/css?family=Nunito');// Variables@import 'variables';// Bootstrap//@import '~bootstrap/scss/bootstrap';@import "~bootswatch/dist/materia/bootstrap.min.css";@import '~toastr/toastr';@import "~animate.css/animate.css";// Font Awesome//@import '~@fortawesome/fontawesome-free/scss/fontawesome';//@import '~@fortawesome/fontawesome-free/scss/regular';//@import '~@fortawesome/fontawesome-free/scss/solid';//@import '~@fortawesome/fontawesome-free/scss/brands';/** Ajustes generales **/body { background-color: #F9F9F9;}.nav-login { box-shadow: none; color: $white!important; text-transform: capitalize; padding-top: 0.3rem; padding-right: 1rem; padding-bottom: 0.3rem; padding-left: 1rem;}.nav-login:hover { background-color: #b61825;}.nav-login a {}a { color: $white;}a:hover { color: $black; text-decoration: none;}.btn-mred { background-color: $mred;}.btn-mred:hover { background-color: $btn-mred-hover;}.bg-color { background-color: $bg-color;}/** Imagen Background **/body,html { height: 100%;}.bg { /* The image used */ background-image: url("../imgs/imgparejas/couple-1030744.jpg")!important; /* Full height */ height: 100%!important; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover;}.bg2 { /* The image used */ background-image: url("../imgs/imgparejas/couple-1363967.jpg")!important; /* Full height */ height: 100%!important; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover;}.bg3 { background-image: url("../imgs/imgparejas/couple-1329349.jpg")!important; /* Full height */ height: 100%!important; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover;}.bg4 { background-image: url("../imgs/imgparejas/freestocks-org-t3mXTwuTWJ4-unsplash.jpg")!important; /* Full height */ height: 100%!important; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover;}.mred { background-color: $mred;}.slogan { font-size: 15px;}.logo { font-size: 25px;}/** Card welcome ***/.welcome-card { background-color: $welcome-card;}/** cards **/.card-material { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.3s cubic-bezier(.25, .8, .25, 1);}.card-material:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);}.info-card>* { font-size: 25px;}.circle { display: inline-block; text-align: center; width: 70px; height: 70px; -moz-border-radius: 50%!important; -webkit-border-radius: 50%!important; border-radius: 50%; -webkit-box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75); box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75);}.circle>.icons { position: relative; top: calc(50% - 10px); /* 50% - 3/4 of icon height */}.fav-btn { background-color: $white;}.msg-btn { background-color: $white;}.lov-icon { font-size: 25px;}.msg-icon { font-size: 25px;}.lov-icon-color { color: $red;}.msg-icon-color { color: green;}.fav-btn-selected { background-color: $btn-mred-hover;}.msg-btn-selected { background-color: green;}.lov-icon-color-selected { color: $white;}.msg-icon-color-selected { color: $white;}.profile-name-card { border: none;}.option { margin-left: 10px; margin-right: 10px;}.box-option { border: 2px solid gray;}.box-option-container { border: none;}.back-color { background-color: $body-bg;}.question { background-color: $white; text-align: center; position: relative; min-height: 450px; padding-bottom: 50px;}.card-material { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.50s cubic-bezier(.25, .8, .25, 1);}.card-material:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);}.question-title { width: 90%; margin: 0 auto 50px; font-size: 25px; font-weight: 400;}.option input { position: absolute; opacity: 0;}.input { cursor: pointer;}.option>input+div { /* DIV STYLES */ cursor: pointer; border: 2px solid transparent;}.option-text { cursor: pointer;}.box-option:hover { background: $btn-mred; color: $white; border: 2px solid $btn-mred;}.box-option-checked { background: $btn-mred; color: $white; border: 2px solid $btn-mred;}/* Elemento Radio, cuando está marcado */input[type="radio"]:checked~.box-option { background: $btn-mred; color: $white; border: 2px solid $btn-mred;}.fixed-box { //display: block; //width: auto;}.col-container { display: table; width: 100%;}.fixed-box { display: table-cell; padding: 16px;}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><div class="container"> <div class="row justify-content-center"> <div class="col-xs-12 col-md-12 col-lg-12 col-xl-12"> <div class="progress my-4"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="12" aria-valuemin="0" aria-valuemax="17" style="width: 70.588235294118%"> </div> </div> <div class="col-md-12 "> <div class="card box-option-container justify-content-center "> <h2 tabindex="0" role="heading" class="text-center"> <div class="question-title"> ¿Estas abierto/a a viajar? </div> </h2> <div class="row text-center no-gutters d-flex justify-content-center "> <div class="option d-flex flex-column"> <label for="Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo"> <div class="box-option py-5 align-middle "> <input id="Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre"> <span class="p-5 option-text">Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo</span> </div> </label> <label for="No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad"> <div class="box-option py-5 align-middle "> <input id="No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre"> <span class="p-5 option-text">No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad</span> </div> </label> <label for="Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero"> <div class="box-option py-5 align-middle "> <input id="Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre"> <span class="p-5 option-text">Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero</span> </div> </label> </div> </div> </div> <div class="nav-buttons right-button float-right m-2"> <a class="btn btn-primary next" href="http://ilink.test/test/next" style="display: none;">Pregunta Siguiente</a> </div> <div class="nav-buttons left-button float-left m-2"> <a class="btn btn-warning back" href="http://ilink.test/test/back">Pregunta Anterior</a> </div> </div> </div> </div> </div>