Question

我有一个使用Bootstrap的奇怪问题一个2 div列：Div one： col-sm-3 应该是一个图像并填充，div 2 col-sm-9 包含一个子行和更多嵌套的div cols。

问题：然而，当我拉伸浏览器窗口时，col-sm-3似乎从它的容器一直垂直伸展在下面的示例中提供。（我把它拉伸到1500px）

我似乎无法包含这个div的高度，此时我无法弄清楚我做错了什么。如果你是一名自助专家，你可以告诉我：

如何包含div col-sm-3并防止它伸出它调整浏览器窗口大小时的容器？这是我的https://jsfiddle.net/00cau918/

如果你想复制问题，我正在使用最新的bootstrap css和js：这是代码：

HTML

        <div class="figurewrap col-sm-3 col-xs-12">
             <div class="figure">     
             </div>
        </div>

        <div class="col-sm-9 col-xs-12">

        <div class="row">



        <div class="numberCircle col-sm-1 ">1
        </div>

          <div class="col-sm-10">
          <p>
Let us know what you want to do today or tomorrow or some other day and I will respond as soon as possible
          </p>
        </div>

        </div>

          <div class="row">
        <div class="numberCircle col-sm-1">2
        </div>

          <div style=""class="col-sm-10">
          <p>
Let us know what you want to do today or tomorrow or some other day and I will respond as soon as possible

          </p>
        </div>
        </div>  

              <div class="row">
        <div class="numberCircle col-sm-1">3
        </div>

          <div style=""class="col-sm-10">
          <p>
Let us know what you want to do today or tomorrow or some other day and I will respond as soon as possible

          </p>
        </div>
        </div>        
      </div>
    </row>
<div>

CSS：

/* BODY DEFAULTS */

body {
  height: 100vh;
  width: 100vw; background:#fff !important;
}

@media (max-width:210px) {
  body {
    overflow-x: auto;
  }
}

@media (min-width:211px) {
  body {
    overflow-x: hidden;
  }
}



.row {margin-bottom:10%; display: flex;
    align-items: center; }

@media (max-width:589px) {

    .titlegroup h3 {display:none !important;}
   .titlegroup svg {clear:both; margin:0 auto; display:block !important; margin-top:25px; margin-bottom:25px;}
.titlegroup {display:block !important;}
.footer {text-align: center;}

}

@media (min-width:590px) {


 .titlegroup {margin-bottom:3%;  }


   .titlegroup h3 {  position: relative; 
}
.footer {text-align:center;}





}


/* CUSTOM FONT */



@media (min-width:1520px)
{

h1 {
  font-size: 50px !important;
  display: inline-block;
}

h2 {
  font-size: 40px !important;
  display: inline-block;
}

h3 {
  font-size: 40px !important;
  display: inline-block;
}

h4 {
  font-size: 30px !important;
  display: inline-block;
}

p {
  font-size: 25px !important; margin-top:40px; 
}

svg {
  height: 300px!important; 
  width: 258px !important;
}

.space {margin-bottom:30px;}

.footer li {display:inline-block; position:relative; padding-right:20px; font-size: 20px !important; font-weight:bold; }

.figurewrap {max-height:300px !important; position:relative;}
}


@media (max-width:1519px)
{

h1 {
  font-size: 2.3vmax !important;
  display: inline-block;
}

h2 {
  font-size: 2.5vmax !important;
  display: inline-block;
}

h3 {
  font-size: 2.5vmax !important;
  display: inline-block;
}

h4 {
  font-size: 2.3vmax !important;
  display: inline-block;
}

p {
  font-size: 1.7vmax !important;
}

svg {
  height: 300px!important; 
  width: 258px !important;
}
.footer li {display:inline-block; position:relative; padding-right:20px; font-size: 1.3vmax !important; font-weight:bold; }

}


@media (max-width:1357px)
{

h1 {
  font-size: 3.3vmax !important;
  display: inline-block;
}

h2 {
  font-size: 3.0vmax !important;
  display: inline-block;
}

h3 {
  font-size: 2.8vmax !important;
  display: inline-block;
}

p {
  font-size: 2.0vmax !important;
}

svg {
  height: 6vmax !important; 
  width: 14.5vmax !important;
}

.footer li {display:inline-block; position:relative; padding-right:20px; font-size: 1.5vmax !important; font-weight:bold; }

}


@media (max-width:749px)
{

h1 {
  font-size: 3.3vmax !important;
  display: inline-block;
}

h2 {
  font-size: 3.0vmax !important;
  display: inline-block;
}

h3 {
  font-size: 2.5vmax !important;
  display: inline-block;
}

p {
  font-size: 2.0vmax !important;
}

svg {
  height: 6vmax !important; 
  width: 14.5vmax !important;
}



.footer li {display:inline-block; position:relative; padding-right:20px; font-size: 1.5vmax !important; font-weight:bold; }

}



@media (max-width:659px) 
{

h1 {
  font-size: 25px !important;
  display: inline-block; 
}

h2 {
  font-size: 22px !important;
  display: inline-block;
}

h3 {
  font-size: 22px !important;
  display: inline-block; 
}

p {
  font-size: 17px !important;
}

svg {
  height: 29px !important; 
  width: auto !important; margin-top:9px;
}

.footer li {display:inline-block; position:relative; padding-right:20px; font-size: 1.5vmax !important; font-weight:bold; }

}


.numberCircle {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  background: #333;
  border: 2px solid #333;
  color: #fff;
  text-align: center;
}

@media (min-width:718px) {

    .titlegroup {margin-bottom:3%; display:flex;justify-content:center;align-items:center;}

}

@media (max-width:717px) {

   .titlegroup {margin-bottom:3%; display:inline-table; table-layout:fixed; }
     .titlegroup h3 {margin-bottom:3%; display:table-cell;  vertical-align:middle !important;}


}

.copyright {color:#333!important;}



.footer a {color:#0D58A6 !important;}

.footer a:hover {color:#333!important; text-decoration:none !important; }




@media (max-width:991px)
{
.footer span {display:none !important;}
}


@media (min-width:992px)
{
  .footer i {display:none !important;}

}

@media (max-width:604px)
{
.footer li { display:inline; }

.footer i { margin-top:5%; }

.footer li:nth-child(3):after { content:"\A"; white-space:pre; }

.footer li { font-size: 13px !important;  }
}

@media (max-width:378px){

  .footer li { display:inline; }

 .copyright {margin-bottom:20px;}

.footer li:nth-child(1):after { content:"\A"; white-space:pre; }

.footer li { font-size: 13px !important;  }
}




@media (min-width:577px) {
.numberCircle {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  background: #333;
  border: 2px solid #333;
  color: #fff;
  text-align: center;
    font: 56px Arial, sans-serif;
    width: 66px;
    height: 66px;
  }
  .figurewrap {text-align:left;}

  .figure { min-height:29vmax; width:15vmax; background:purple; margin-left:-13px; margin-top:10px; }
  }

   @media (max-width:767px) {
.numberCircle {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  background: #333;
  border: 2px solid #333;
  color: #fff;
  text-align: center;
    font: 32px Arial, sans-serif;
    width: 50px;
    height: 45px;
  }
  .figurewrap { ;}

  .figure { min-height:29vmax; width:15vmax; background:green; margin-left:26%; }


  @media (max-width:576px) {
.numberCircle {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  background: #333;
  border: 2px solid #333;
  color: #fff;
  text-align: center;
    font: 32px Arial, sans-serif;
    width: 50px;
    height: 45px;
  }
  .figurewrap { }

  .figure { min-height:29vmax; width:15vmax; background:pink; margin-left:30%; }
  }

  @media (max-width:374px) {
.numberCircle {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  background: #333;
  border: 2px solid #333;
  color: #fff;
  text-align: center;
    font: 32px Arial, sans-serif;
    width: 50px;
    height: 45px;
  }
  .figurewrap {text-align:Center;}

  .figure { min-height:29vmax; width:15vmax; background:blue; margin-left:35%; }
  }

调整浏览器窗口大小时，Div在其容器外部伸展（不能包含高度）

0 个答案: