Question

我试图通过在视口为xs时堆叠嵌套网格来使网页响应。它通过堆叠这两个网格在xs中工作，但是当在sm和更大的视图中时，这些网格内部的文本彼此之间的距离太远，我必须在这里做错事并且挣扎了好几个小时，请帮忙，真的很感激！声望太低，无法发布直接图片，请参阅图片上传的链接。

http://i68.tinypic.com/ru1dvm.png

http://i67.tinypic.com/157iqli.jpg

     <div class="row row-content">

             <div>
                <div class="row">
                    <div class="col-xs-12 col-sm-3">
                        <h3>Alberto Somayya</h3>
                    </div>
                    <div class="col-xs-12 col-sm-3">
                        <h3><small>Executive Chef</small></h3>
                    </div>
                </div>
                <div>
                    <p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world.!</em></p>
                </div>
            </div>

Answer 1

我认为你用你正在努力实现的目标错误地解决了这个问题。您希望名称和职业标题都是h3，因此请尝试为标题创建一个span类：

<div class="row">
    <div class="col-xs-12">
    <h3>Alberto Somayya <span class="split-text"><small>Executive Chef</small></span></h3>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world.!</p>
      </div>
      </div>

然后使用媒体查询创建一个断点，使文本从内联到块：

.split-text {display:block;}
/* Small devices (tablets, 768px and up) */
@media (min-width:768px) {
 .split-text{display:inline;}
}

它简单得多。这是在工作中展示它的小提琴http://jsfiddle.net/czc7x7w8/8/

Answer 2

可能导致此问题的第一个问题是您的列数在 sm 及更高版本中过短。对于 xs ，每行中有12个，这是Bootstrap网格系统的基本规则。

尝试将col-sm-值从3更改为6，或在任意一侧创建一个空列，使其填满整行。

每行应总共<12> 。你可以重复一遍，但你仍然应该将列数与12相关（使用col-sm-12和同一.row中的两个col-sm-6是正常的，因为这两个6的去填补其他12个。）

自举网格，文字相隔太远

2 个答案: