Как сделать 3 разных текстовых поля одинаковой высоты (в адаптивном состоянии) - PullRequest
Новая
       10

Как сделать 3 разных текстовых поля одинаковой высоты (в адаптивном состоянии)

0 голосов
/ 02 мая 2018

Я использую Bootstrap V3.3.5. Экран разделен на 3 колонки по горизонтали. Каждый столбец имеет разную длину текста, которая может быть изменена пользователем .

Столбцы горизонтальные (по Bootstrap).

Цель ... как исправить: я хочу такой же высоты для этих 3 столбцов-ящиков. Каждый столбец должен иметь высоту самого высокого столбца .... поэтому все столбцы имеют одинаковую высоту.

За исключением .... в режиме начальной загрузки "xs", ящики расположены вертикально (проблем нет). Проблема в режиме «sm, md и lg» (Bootstrap), когда столбцы расположены горизонтально рядом друг с другом.

EDIT:

Я думал, что проблема была в тексте , но, похоже, в кнопке начальной загрузки MODAL ... поэтому я не поместил модальный код в первый код.

Я сделал: поместите style="white-space: normal;" (чтобы разместить текст в модальном) - кажется, есть конфликт с этим стилем

Требуются:

  • Модальные высота кнопок то же самое в режиме начальной загрузки sm, md, lg (высота самой большой кнопки)
  • Текст начинается на той же высоте
  • Подгонка текста в кнопке

Смотрите фрагмент в режиме полной страницы!

Код: 

<!doctype html>
<html>
<head>
<style>
.row {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
@media (max-width: 768px) {
.row {
	flex-wrap: wrap;
}
}
.row > [class*='col-'] {
   display: flex;
   flex-direction: column;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

</head>

<body>
  <!-- BootsTrap V 3.3.5 -->
  <div class="container-fluid">
  <div class="row RowHeight" >
		<div class="col-xs-12 col-sm-3">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal_1" style="white-space: normal;">
  Launch demo modal 11 11 111 111
</button>

<!-- Modal -->
<div class="modal fade" id="myModal_1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel_1">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>		</div><!-- col2 -->
<!-- Button trigger modal (end) -->

		<div class="col-xs-12 col-sm-3">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal_2" style="white-space: normal;">
  Launch demo modal 2222 222 222 222 222 222 222  22222222 22 22222 2222
</button>

<!-- Modal -->
<div class="modal fade" id="myModal_2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_2">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel_2">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>		</div><!-- col2 -->
<!-- Button trigger modal (end) -->

  </div>
  </div>
</body>
</html>

Ответы [ 4 ]

0 голосов
/ 02 мая 2018

Можете ли вы добавить это к вашей onload функции `

var heighest = document.getElementsByClassName("box")[0].offsetHeight;

for(i = 1;i<3; i++){
    if(heighest < document.getElementsByClassName("box")[i].offsetHeight){
      heighest  = document.getElementsByClassName("box")[i].offsetHeight;
    }
}`

После этого вы можете использовать heighest 

.box {
  background-color: lightgray;
  height: heighest;
}
0 голосов
/ 02 мая 2018

Используйте flexbox, чтобы добиться этого, вы можете легко иметь одинаковую высоту для всех .box на основе столбца максимальной высоты, я сделал короткий пример на основе вашего кода, посмотрите: 

.box {
  background-color: lightgray;
  margin-left: 10px;
}

.row{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.row > [class*='col-'] {
   display: flex;
   flex-direction: column;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<body>
  <!-- BootsTrap V 3.3.5 -->
  <div class="container-fluid">
  <div class="row" >
    <!-- for test! -->
    <div class="col-xs-4 col-sm-4 box">
      <p> Lorem ipsum dolor sit amet</p>
    </div>

    <div class="col-xs-4 col-sm-4 box">
      <p> Lorem ipsum dolor sit amet, consec tetuer adipiscing consec elit.</p>
    </div>

    <div class="col-xs-4 col-sm-4 box">
      <p> Lorem ipsum dolor sit amet, consec tetuer adipis cing elit. Aenean commodo ligula eget dolor. Aenean massa cing.</p>
    </div>
  </div>
  </div>
</body>
0 голосов
/ 02 мая 2018

Вы также можете попробовать вот так: 

.box {
  background-color: lightgray;
  padding: 5px 10px;
  min-height: 200px;
}

@media (max-width: 768px) {
  .box {
    min-height: auto;
    margin-bottom: 15px;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <!-- for test! -->
  <div class="col-xs-12 col-sm-4">
    <div class="box">
      <p> Lorem ipsum dolor sit amet</p>
    </div>
  </div>

  <div class="col-xs-12 col-sm-4">
    <div class="box">
      <p> Lorem ipsum dolor sit amet, consec tetuer adipiscing consec elit.</p>
    </div>
  </div>

  <div class="col-xs-12 col-sm-4">
    <div class="box">
      <p> Lorem ipsum dolor sit amet, consec tetuer adipis cing elit. Aenean commodo ligula eget dolor. Aenean massa cing.</p>
    </div>
  </div>
</div>
0 голосов
/ 02 мая 2018

Самое простое решение - назначить жестко запрограммированную высоту для вашего класса "box", основываясь на вашем самом высоком столбце-поле, например: 

.box {
    height: 300px;
}

Другим решением может быть вычисление максимальной высоты столбца с помощью JavaScript и динамическое присвоение этой же высоты двум другим блокам, а также с помощью JS.

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

Похожие темы

...