Как исправить изменение размера браузера Bootstrap? - PullRequest
Новая
       4

Как исправить изменение размера браузера Bootstrap?

0 голосов
/ 28 сентября 2018

Я пытаюсь создать простой макет из трех столбцов.Я просто не могу понять, как заставить divs работать правильно при изменении размера браузера.Я, вероятно, смогу заставить его работать, если бы использовал запросы @media, но я хочу использовать платформу Bootstrap.Текст высыпается при изменении размера, так как я дал фиксированную высоту div.Если я не укажу фиксированную высоту, размер div-ов становится неравномерным при изменении размера браузера.

Я также должен перечислить (неупорядоченный список) 1-3 ссылки, что делает выравнивание некорректным при изменении размера браузера.Вот ссылка Codepen,

https://codepen.io/ArshRai/pen/xyxmEJ

HTML: 

<div class="container-fluid">
  <div class="row ">
                        <div class="col-lg" id="setup-mini-card">
                            <div class="row align-items-start">
                                <div class="col col-lg-4">
                                    <div class="tile-sm pt-4">
                                      <div class="col col-md-6">
                                        <img class="mr-auto pt-3" src="https://webiconspng.com/wp-content/uploads/2017/02/Photograph-Transparent-Icon.png" />
                                      </div>
                                        <div class="col-md-6 ml-5" style="display: table; height: 90px;overflow: hidden;" >
                                        <div class="tile-sm-link">
                                      <ul class="tile-sm-list">
                                        <li><a href="">Lorem ipsum dolor</a> </li>
                                       </ul>
                                        </div>
                                      </div>
                                    </div>
                                </div>
                                <div class="col-md-4 ">
                                    <div class="tile-sm pt-4">
                                      <div class="col-md-6">
                                        <img class="mr-auto pt-3" src="https://webiconspng.com/wp-content/uploads/2017/02/Photograph-Transparent-Icon.png" />
                                      </div>
                                      <div class="col-md-6 ml-5" style="display: table; height: 90px;overflow: hidden;" >
                                        <div class="tile-sm-link">
                                      <ul class="tile-sm-list">
                                        <li><a href="">Lorem ipsum dolor</a> </li>
                                         <li><a href="">Lorem ipsum dolor</a> </li>
                                       </ul>
                                        </div>
                                      </div>
                                    </div>
                                </div>
                               <div class="col-md-4">
                                    <div class="tile-sm pt-4">
                                      <div class="col-md-6">
                                        <img class="mr-auto pt-3" src="https://webiconspng.com/wp-content/uploads/2017/02/Photograph-Transparent-Icon.png" />
                                      </div>
                                      <div class="col-md-6 ml-5" style="display: table; height: 90px;overflow: hidden;" >
                                        <div class="tile-sm-link">
                                      <ul class="tile-sm-list">
                                        <li><a href="">Lorem ipsum dolor </li>
                                           <li><a href="">Lorem ipsum dolor</a> </li>
                                         <li><a href="">Lorem ipsum dolor</a> </li>
                                       </ul>
                                        </div>
                                      </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

CSS: 

#setup-mini-card {
  padding-top: 60px;
}

.tile-sm-txt {
    vertical-align: text-bottom;
    padding-left: 10px;

}

.tile-sm {
    height: 130px;
    margin-bottom: 20px;
    border-radius: 5px;
   /* text-align: center;*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 30px
}

.tile-sm:hover
{
    box-shadow: 0 4px 4px rgba(0, 200, 149, .24), 0 0 4px rgba(0, 173, 147, .12), 0 6px 18px rgba(0, 145, 147, .12);
    transform: translate3d(0, -2px, 0);
    text-decoration: none;

}

.tile-sm > a:hover {
    color:#fff !important;
}



.tile-sm > div img {
  float:left;
  width:60px;


}

.tile-sm-list  {
  list-style: none;


}

.tile-sm-link {
  display: table-cell; vertical-align: middle;
}

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018 
Depending on your aim you could change the overflow property as shown below.

переполнение: скрыто;или переполнение: авто; 

.tile-sm{
    height: 130px;
    margin-bottom: 20px;
    border-radius: 5px;
   /* text-align: center;*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   padding: 30px;
   overflow:auto;
}

или 

.tile-sm{
    height: 130px;
    margin-bottom: 20px;
    border-radius: 5px;
   /* text-align: center;*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   padding: 30px;
   overflow: hidden;
}
0 голосов
/ 29 сентября 2018

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

.

.tomato{
  background: tomato
}
.yellow{
  background: yellow
}
.green{
  background: green
}
.nested{
  padding: 15px;
}
.image{
  background-color: blue
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- Columns start at 100% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="container">
  <div class="row">
    <div class="col-12 col-md-4 yellow">
     <!--Nested-->
     <div class="row nested">
          <div class="col-5 image">
          </div>
          <div class="col-7 tomato">
             <ul>
                <li><a href="">Lorem ipsum dolor</a> </li>
                <li><a href="">Lorem ipsum dolor</a> </li>
             </ul>
          </div>
     </div>
    </div>
    <div class="col-12 col-md-4 green">.col-12 .col-md-4</div>
    <div class="col-12 col-md-4 yellow">.col-12 .col-md-4</div>
  </div>
</div>
...