当一个文本div更改时,使其他文本div更改大小

时间:2018-08-21 10:10:50

标签: javascript jquery html css twitter-bootstrap-3

我有以下文本div。

.owners{
  margin: 0px 20px 0px 20px;
}
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row owners">
    <div class="col-sm-3 text-center" style="background-color:lavender;overflow-wrap:break-word;">Owner</div>
    <div class="col-sm-3 text-center" style="background-color:lavenderblush;overflow-wrap:break-word;">Owner</div>
    <div class="col-sm-3 text-center" style="background-color:lavender;overflow-wrap:break-word;">Owner</div>
     <div class="col-sm-3 text-center" style="background-color:lavender;overflow-wrap:break-word;">Owner</div>
  </div>

或以下链接:https://codepen.io/Lamdepzai123/pen/RJqPqq

当我编辑文本div的内容时,文本将环绕,使一个div改变其大小。我想知道如何使其他三个div根据该div更改其大小。

非常感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

添加此CSS!我希望能解决您的问题。

ruamel.yaml.add_representer(OrderedDict, ruamel.yaml.RoundTripDumper.represent_dict, Dumper=ruamel.yaml.RoundTripDumper)

答案 1 :(得分:1)

添加此CSS:

.owners{
  margin: 0px 20px 0px 20px;
  flex-wrap: wrap;
   display: flex;
   justify-content: center;
}
.text-center{
    display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

这是the updated codepen