文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >引导数据库列未正确响应

问引导数据库列未正确响应
EN

Stack Overflow用户
提问于 2015-03-11 02:06:53
回答 3查看 177关注 0票数 0

我已经有了一个基本的定价计划结构，使用bootstrap列，除了768px和992px的分辨率之外，似乎工作得很好。在这些屏幕宽度之间，这4列真的变得很瘦，里面的信息在哪里倾泻而出，看起来很糟糕。我尝试过设置最小宽度，但它只会导致列重叠。我认为在这两个解决方案中，2个与下面的2个并排是最合适的，但我不能复制期望的结果。任何想法都是非常受欢迎的。

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

HTML：

代码语言：javascript
复制
<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：

代码语言：javascript
复制
.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; 
}
twitter-bootstrap
twitter-bootstrap-3
css
EN

回答 3

Stack Overflow用户

发布于 2015-03-11 02:27:42

试试这个..。这应该真的能解决你的问题了。

CSS

代码语言：javascript
复制
@media(min-width:768px) and (max-width:992px)
{
    .head h2
    {
         font-size:1.1em;
    }
   .price h3
    {
        font-size:55px;
    }
    .price .symbol
    {
         font-size:30px; 
    }
}
票数 2
EN

Stack Overflow用户

发布于 2015-03-11 02:19:30

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

代码语言：javascript
复制
@media (max-width:992px) and (min-width:768px) {
 .plan .head h2{font-size:14px;}
 .plan .price h3{font-size:50px;}
}

在这个媒体查询中，你可以针对任何元素。

票数 1
EN

Stack Overflow用户

发布于 2015-03-11 02:31:51

感谢大家的建议！在使用了更多的网格之后，我实际上解决了这个问题，只需简单地将col sm-3替换为col sm-6，它给了我正确的包装。我已经用这个解决方案更新了我的Codepen，以防将来任何人都能用上它。再次感谢。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/28970971

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档