Как создать сетку Bootstrap внутри элемента, размеры которого зависят от содержимого? - PullRequest
Новая
       7

Как создать сетку Bootstrap внутри элемента, размеры которого зависят от содержимого?

2 голосов
/ 04 марта 2020

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

После jsfiddle показаны основные требования c 

<div class="pro-modal-outer">
<div class="pro-modal">
<div class="container">
  <div class="row">
    <div class="col-6">
      1 of 2
    </div>
    <div class="col-6">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col-4">
      <div class="field">short</div>
    </div>
    <div class="col-4">
      <div class="field long">
        extra extra long content
      </div>
    </div>
    <div class="col-4">
      <div class="field">long content</div>
    </div>
  </div>  
</div>

https://jsfiddle.net/Nash171/5c1t7dkv/17/

Как вы видите здесь, некоторое содержимое столбца переполняется до следующего столбца.

enter image description here

Ширина столбцов должна соответствовать размеру содержимого, а ширина контейнера должна изменяться в соответствии с ним.

В реальном случае содержимое будет динамическим c. Любой столбец может содержать дочерние элементы разного размера в качестве содержимого

Все столбцы также должны иметь одинаковую ширину

Есть ли какое-либо возможное решение для этого?

Ответы [ 3 ]

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

Отрегулируйте ширину, задав значения в% вместо px, и попробуйте ...

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

удалите это содержимое из кода css. 

.field {
    width: 100px;
}
.field.long {
    width: 250px;
}

ваш код работает нормально, как вы хотите.

следующий фрагмент показывает результат, который вы хотите. 

.pro-modal-outer {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pro-modal {
  background-color: #68acff;
  padding: 20px;
  max-width: 100%;
  min-width: 660px;
}
.row {
  background: #f8f9fa;
  margin-top: 20px;
}
.col-4, .col-6 {
  border: solid 1px #6c757d;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="pro-modal-outer">
    <div class="pro-modal">
      <div class="container-fluid">
        <div class="row">
          <div class="col-6">1 of 2</div>
          <div class="col-6">2 of 2</div>
        </div>
        <div class="row">
          <div class="col-4">
            <div class="field">short</div>
          </div>
          <div class="col-4">
            <div class="field long">extra extra long content</div>
          </div>
          <div class="col-4">
            <div class="field">long content</div>
          </div>
        </div>  
      </div>
    </div>
  </div>
</body>
</html>

Надеюсь, у вас все будет хорошо.

Спасибо ...

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

Для «сверхдлинного контента» используйте class = «col-sm-6», для длинного контента - class = «col-sm-4», а для краткого использования class = «col-sm-2», чтобы размер ширины столбцов настроить соответственно. Если вы используете пользовательские классы, попробуйте указать ширину в «%» вместо px.

...