Question

我已经使用自举列获得了基本的定价计划结构，除了768px和992px的分辨率之外，它们看起来效果很好。在这些屏幕宽度之间，4列只是变得非常瘦，在那里倾吐的信息只是看起来很糟糕。我尝试过设置最小宽度但只会导致列重叠。我认为在这些决议2中与下面的其他2个并排是最合适的，但我无法复制预期的结果。非常感谢任何想法。

Codepen：http://codepen.io/anon/pen/yyRLpv

HTML：

<html>
  <head>
  </head>
  <body>
    <section id="pricing" class="module parallax parallax-3 inset_shadow">
<div class="container">

<div class="pricing-tables">
<div class="row">
<div class="col-sm-3 col-md-3">

<div class="plan first">

<div class="head">
<h2>Up to 50 Participants</h2>
<!-- /.head -->
</div>  


<div class="price">
<p class="nomargin">Starting at</p>
<h3><span class="symbol">$</span>49</h3>
<h4>per month</h4>
<!-- /.price -->
</div>

<ul class="item-list">
<li><strong>1st</strong> Bullet</li>
<li><strong>2nd</strong> Bullet Point</li>
<li><strong>3rd</strong> Bullet</li>
<li><strong>Another Feature</strong></li>
</ul>


<button type="button" class="btn">Learn More</button>

<!-- /.plan first -->
</div>

<!-- /.col-sm-3 col-md-3 -->
</div>


<div class="col-sm-3 col-md-3">
<div class="plan ">

<div class="head">
<h2>Up to 150 Participants</h2>
<!-- /.head -->
</div>  

<div class="price">
<p class="nomargin">Starting at</p>
<h3><span class="symbol">$</span>149</h3>
<h4>per month</h4>
<!-- /.price -->
</div>    

<ul class="item-list">
<li><strong>1st</strong> Bullet</li>
<li><strong>2nd</strong> Bullet Point</li>
<li><strong>3rd</strong> Bullet</li>
<li><strong>Another Feature</strong></li>
</ul>


<button type="button" class="btn">Learn More</button>

<!-- /.plan -->
</div>

<!-- /.col-sm-3 col-md-3 -->
</div>

<div class="col-sm-3 col-md-3">
<div class="plan">
<div class="head">
<h2>Up to 300 Participants</h2>
<!-- /.head -->
</div>  

<div class="price">
<p class="nomargin">Starting at</p>
<h3><span class="symbol">$</span>249</h3>
<h4>per month</h4>
<!-- /.price -->
</div>

<ul class="item-list">
<li><strong>1st</strong> Bullet</li>
<li><strong>2nd</strong> Bullet Point</li>
<li><strong>3rd</strong> Bullet</li>
<li><strong>Another Feature</strong></li>
</ul>

<button type="button" class="btn">Learn More</button>

<!-- /.plan recommended -->
</div>

<!-- /.col-sm-3 col-md-3 -->
</div>

<div class="col-sm-3 col-md-3">

<div class="plan last">

<div class="head">
<h2>Up to 500 Participants</h2>
<!-- /.head -->
</div>  

<div class="price">
<p class="nomargin">Starting at</p>
<h3><span class="symbol">$</span>349</h3>
<h4>per month</h4>
<!-- /.price -->
</div>

<ul class="item-list">
<li><strong>1st</strong> Bullet</li>
<li><strong>2nd</strong> Bullet Point</li>
<li><strong>3rd</strong> Bullet</li>
<li><strong>Another Feature</strong></li>
</ul>

<button type="button" class="btn">Learn More</button>
<!-- /.plan last -->
</div>

<!-- /.col-sm-3 col-md-3 -->
</div>

    <!-- /.row -->
</div>

<!-- /.pricing-tables attached -->
</div>

<!-- /.pricing container -->
</div>

<div class="push_90"></div>
<!-- / PRICING -->
</section>
  </body>
</html>

CSS：

.pricing-tables {
    padding: 20px; 
}

.pricing-tables h1 {
    font-size: 48px; 
}


.pricing-tables .plan.first {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px; 
}

.pricing-tables .plan.last {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px; 
}

.pricing-tables .plan.recommended {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px; 
}

.pricing-tables .plan.recommended .head {
    margin-bottom: 20px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px; 
}

.pricing-tables.attached .col-sm-4,
.pricing-tables.attached .col-md-4,
.pricing-tables.attached .col-sm-3,
.pricing-tables.attached .col-md-3 {
    padding-left: 0;
    padding-right: 0;
}

.pricing-tables.attached .plan {
    border-radius: 0; 
}

.pricing-tables.attached .plan .head {
    border-radius: 0;
}

.pricing-tables.attached .plan.recommended {
    border-radius: 4px; 
}

.pricing-tables.attached .plan.recommended .head {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px; 
}

.pricing-tables.attached .plan.last {
    border-bottom-right-radius: 4px; 
}

.pricing-tables.attached .plan.last .head {
    border-top-right-radius: 4px; 
}

.pricing-tables.attached .plan.first {
    border-bottom-left-radius: 4px; 
}

.pricing-tables.attached .plan.first .head {
    border-top-left-radius: 4px; 
}

.plan {
    box-shadow: 0 2px 2px rgba(10, 10, 10, 0.3);
    min-height: 100px;
    background: rgba(255,255,255,.8);
    border-radius: 4px;
    margin: 20px 0;
    padding-bottom: 25px;
    text-align: center; 
}

.plan:hover {
    background: rgba(255,255,255,1);
    -webkit-transition: all 0.2s ease-in;
       -moz-transition: all 0.2s ease-in;
         -o-transition: all 0.2s ease-in;
            transition: all 0.2s ease-in;
}

.plan .head {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 12px 16px;
    background: #f1f1f1;
    color: #fff; 
}

.plan .head h1, .plan .head h2, .plan .head h3 {
    padding: 0;
    margin: 0;
    font-weight: 100; 
}

.plan .price {
    border-bottom: 1px solid #ccc;
    margin: 0 auto;
    width: 80%; 
}

.plan .price h3 {
    font-size: 82px;
    vertical-align: top;
    line-height: 1; 
}

.plan .price h3 span {
    font-size: 38px;
    vertical-align: top;
    position: relative;
    margin: 6px 0 0 -7px;
    display: inline-block; 
}

.plan .price h4 {
    color: #aaa;
    font-size: 14px; 
}

.plan .btn {
    padding: 10px 30px;
    text-transform: uppercase;
    font-weight: 500; 
}

.plan ul {
    list-style-type: none;
    padding: 20px;
    margin-top: 2px; 
}

.plan ul li {
    line-height: 22px;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 400; 
}

.plan ul li a {
    text-decoration: underline;
    color: #e6e9ed; 
}

.plan ul li:last-child {
    border-bottom: none; 
}

.plan ul strong {
    font-weight: 700; 
}

.plan:hover, .plan.recommended {
    margin-top: 6px;
    margin-bottom: 6px;
    box-shadow: 0 0 22px rgba(10, 10, 10, 0.42);
    position: relative;
    z-index: 99;
    border-radius: 4px; 
    -webkit-transition: all 0.2s ease-in;
       -moz-transition: all 0.2s ease-in;
         -o-transition: all 0.2s ease-in;
            transition: all 0.2s ease-in;
}

.plan:hover .head, .plan.recommended .head {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: #ccc; 
}

.plan.recommended .btn {
    margin-bottom: 10px; 
}

Answer 1

试试这个...... 这应该真正解决你的问题......

CSS

@media(min-width:768px) and (max-width:992px)
{
    .head h2
    {
         font-size:1.1em;
    }
   .price h3
    {
        font-size:55px;
    }
    .price .symbol
    {
         font-size:30px; 
    }
}

Answer 2

您可以像这样在您的CSS中添加媒体标签

@media (max-width:992px) and (min-width:768px) {
 .plan .head h2{font-size:14px;}
 .plan .price h3{font-size:50px;}
}

在此媒体查询中，您可以定位任何元素。

Answer 3

谢谢大家的提示！在玩了一下网格后，我实际上通过简单地用col-sm-6替换col-sm-3来解决这个问题，这给了我正确的包装。我已经使用该解决方案更新了我的Codepen，以防将来为任何人派上用场。再次感谢。

Bootstrap列无法正确响应

3 个答案: