Question

我正在使用最新版本的Bootstrap。

这是我的代码在我的网络浏览器中以桌面格式显示的内容： enter image description here

我的问题的要点如下所示：http://jsfiddle.net/6x6c4qdb/

<section id="prices">
<p>Pricing Table Section </p>
</section>
<section id="contact">
<p> Contact Info </p>
</section>

当我将浏览器窗口大小减小到“移动视图”时，我正试图找出一种方法来阻止定价表中的内容推送到其他部分。 CSS中是否有“自动换行”或内容折叠方式，还是通过jquery完成？我只想让定价表保留在移动视图的白色部分。

Answer 1

您需要使用bootstrap来创建结构，并将您的东西放在该结构中。当您更改结构时，通过在bootstraps结构中间或其外部添加dom元素，结构会中断。

以下是演示小提琴： Fiddle updated

HTH

-Ted

Answer 2

我做了一些编辑HERE我觉得bootstrap对你来说应该是最好的选择。我标记的那个！重要的是在不篡改代码的情况下替换bootstrap默认设置

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="col-md-12 padding-top pref-margin">
    <div class="col-md-4 pref-margin">
       <div class="panel panel-default border-r">
            <div class="panel-body no-padding">
            <div class="panel-content-head"> Proj 1</div>
            <div class="panel-content-body">
                <div class="price-body">
                    <li class="plan-price">
                        <strong>$125</strong>
                    </li>
                </div>
            </div>
            <div class="panel-content-foot">
                <ul class="features">
                          <li>
                          Feature 1 Blah blah blah blah blah blah blah
                          </li>
                          <li>
                          Feature 2 Blah blah blah blah
                          </li>
                </ul>

            </div>
         </div>
     </div>
</div>
    <div class="col-md-4 pref-margin">
             <div class="panel panel-default border-r">
            <div class="panel-body no-padding">
            <div class="panel-content-head"> Proj 1</div>
            <div class="panel-content-body">
                <div class="price-body">
                    <li class="plan-price">
                        <strong>$125</strong>
                    </li>
                </div>
            </div>
            <div class="panel-content-foot">
                <ul class="features">
                           <li>
                        Feature 1 blah blah blah blah blah blah
                    </li>
                    <li>
                        Feature 2 blah blah blah blah blah blah
                    </li>
                    <li>
                        Feature 3 blah blah blah blah blah blah
                    </li>
                </ul>

            </div>
         </div>
        </div>
    </div>
    <div class="col-md-4 pref-margin">
             <div class="panel panel-default border-r">
            <div class="panel-body no-padding">
            <div class="panel-content-head"> Proj 1</div>
            <div class="panel-content-body">
                <div class="price-body">
                    <li class="plan-price">
                        <strong>$125</strong>
                    </li>
                </div>
            </div>
            <div class="panel-content-foot">
                <ul class="features">
                          <li>
                        Feature 1 blah blah blah blah blah
                    </li>
                    <li>
                        Feature 2 blah blah blahblahb lbhal
                    </li>
                    <li>
                        Feature 3 blah blah blah blah blah blah
                    </li>
                    <li>
                        Feature 4 blah blah blah blah blah blah
                    </li>
                    <li>
                        Feature 5 blah blah blah blah blah blah
                    </li>
                    <li>
                        Feature 6 blah blah blah blah blah blah
                    </li>
                </ul>

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

CSS

@media (max-width: 400px) {
.pref-margin
{
    margin-right: -0px !important;
    margin-right: -0px !important;
    padding: 20px 1px !important;
}
}
.padding-top
{
    padding-top: 20px;
}
.no-padding
{
    padding: 0px !important;
}
.border-r
{
    border-radius: 6px !important;
}
body {
    font-family: Helvetica,Helvetica,Arial,sans-serif;
    font-size:14px;
    line-height:1.428571429;
    color:#333;
    background-color:#fff;
}
body, html {
    height: 100%;

}
.panel-content-head
{
  border-radius: 6px 6px 0 0;
  padding: 15px;
  font-size: 24px;
  line-height: 24px;
  color: #fff;
  background: #3d3d3d;
  margin-bottom: 30px;
  border: 1px solid #333;
  text-transform: uppercase;
}
.price-body{
  width: 125px;
  height: 125px;
  margin: 0 auto 15px auto;
  background: black;
  color: white;
  border-radius: 100%;
  display: table;
}
li.plan-price {
  border-top: 0;
  vertical-align: middle;
  display: table-cell;
  font-size: 36px;
  text-align: center;
}
.features
{
    border-top: 1px solid #efefef;
}

Answer 3

我明白了！ :)我剥离了页面的内容，并用一大堆Lorem ipsum段落替换它，并在每个部分中将字体着色为不同的颜色。通过这样做，我想看看出血发生在哪里。事实证明所有部分都在流血！直到第三部分，定价表，我才看出流血有多糟糕。有了这些信息，我在StackOverflow上查看了这些资源：

HTML5 - Section or Div?

Bootstrap and html5 - section or div?

Sections标签（我猜在Bootstrap中）本身不会格式化，但是div会这样做。我只是使用div标签“强化”我的部分。虽然这在点导航栏和Internet Explorer中产生了一个新问题，但如果我找不到资源，这些问题可能会变成SO中的新问题。感谢您的帮助，SO和用户，特别是那两个尝试过的人。

部分内容正在推进另一部分

3 个答案: