首页猿问 div...

div 中的宽度相同，内部有较大或较短的文本

Html5

智慧大石 2023-09-11 15:03:05

我对框的大小有疑问，问题是有时框内的文本比其他框更大。我怎样才能让我的盒子有固定的宽度？是否有一个 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>编辑：最后一个框的宽度小于较大屏幕中的其他框。尝试增加 jsfiddle 中 HTML 部分的大小

查看完整描述

3 回答

开心每一天1111

TA贡献1836条经验获得超13个赞

添加带有选项类的 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 */

/* 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 */

/* Full height */

height: 100%!important;

/* Center and scale the image nicely */

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

.bg3 {

/* 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;

}

</div>

¿Estas abierto/a a viajar?

</div>

</h2>

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

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

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

<a class="btn btn-primary next" href="http://ilink.test/test/next" style="display: none;">Pregunta Siguiente</a>

</div>

<a class="btn btn-warning back" href="http://ilink.test/test/back">Pregunta Anterior</a>

</div>

反对回复 2023-09-11

绝地无双

TA贡献1946条经验获得超4个赞

在你的课堂上.option-text你应该添加font-size: [Wanted size]. 因此，每个框/选项都将具有相同的字体大小。

反对回复 2023-09-11

开满天机

TA贡献1786条经验获得超12个赞

在标签上添加 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%，并且所有标签将具有相同的尺寸！

实例_

反对回复 2023-09-11

3 回答
0 关注
90 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

div 中的宽度相同，内部有较大或较短的文本

div 中的宽度相同，内部有较大或较短的文本

3 回答

添加回答