个人中心
gpt4 book ai didi

css - Bootstrap 列未正确响应

转载 作者：太空宇宙 更新时间：2023-11-03 23:20:17 25 4
gpt4 key购买 nike

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

代码笔: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; 
}

最佳答案

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

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

关于css - Bootstrap 列未正确响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28970971/

25 4 0
文章推荐： node.js - 我们可以从 Passport js中的授权码获取访问 token 吗
文章推荐： c - 奇怪的 mmap 行为
文章推荐： node.js - 在 React 上使用 Youtube v3 API 的 maxResults
文章推荐： python - 为什么 Python 的列表结构使用 **ob_item 而不是 *ob_item 存储 PyObject
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com