Question

我正在尝试创建一个简单的三列布局。我只是想不通如何调整浏览器大小时如何使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;
}

Answer 1

确保正确嵌套引导程序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>

Answer 2

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

如何修复Bootstrap浏览器大小调整？

2 个答案: