Одинаковая ширина в div с большим или коротким текстом внутри - PullRequest
Новая
       0

Одинаковая ширина в div с большим или коротким текстом внутри

0 голосов
/ 14 марта 2020

У меня проблема с размером ящика, проблема в том, что иногда текст внутри ящика растет больше, чем в других ящиках. Как я могу иметь фиксированную ширину в своих коробках? существует ли класс Bootstrap, который может обрабатывать данные?

https://jsfiddle.net/tyxc4edf/

<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">
                            <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>

РЕДАКТИРОВАТЬ: ширина последнего окна меньше, чем другие поля в больших экранах. Попробуйте увеличить размер секции HTML в jsfiddle

Ответы [ 3 ]

0 голосов
/ 14 марта 2020

Добавьте на свои метки bootstrap class = "col-12", например: 

<label class="col-12" for="Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero">

Добавьте col-12 на все метки. Теперь каждая метка получит ширину 100%, и все метки будут иметь тот же размер!

Live пример

0 голосов
/ 14 марта 2020

Добавление классов гибкой колонки d-flex с классом опции 

.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>
0 голосов
/ 14 марта 2020

В вашем классе .option-text вы должны добавить font-size: [Wanted size]. Поэтому все поля / опции будут иметь одинаковый размер шрифта.

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

Нет похожих вопросов

...