哪个bootstrap组件适合显示Features部分，如下面的截图所示？

Question

![screenshot of page i am working on][1]

以下是我使用过bootstrap列表的功能部分，但我不喜欢它的外观和感觉，所以请为我建议任何好的bootstrap组件。

Answer 1

网上有很多不错的解决方案。 就个人而言，我希望看到一个功能列表，如下例所示： Portfolio Template

您可以简单地水平对齐项目，并添加一些花哨的Glyphicon或FontAwesome图标。 在此示例中，所需的代码段非常简单：

<!-- Services Section -->
<section id="services">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Services</h2>
                <h3 class="section-subheading text-muted">Lorem ipsum   dolor sit amet consectetur.</h3>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-md-4">
                <span class="fa-stack fa-4x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="service-heading">E-Commerce</h4>
                <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
            </div>
            <div class="col-md-4">
                <span class="fa-stack fa-4x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="service-heading">Responsive Design</h4>
                <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
            </div>
            <div class="col-md-4">
                <span class="fa-stack fa-4x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="service-heading">Web Security</h4>
                <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
            </div>   
        </div>
    </div>
</section>

Answer 2

显示项目列表的最标准格式是使用引导网格系统将内容分成3列，如Airbnb's landing page上所示（在jumbotron下方向下滚动）。

这里是Bootstrap网格系统的文档：http://getbootstrap.com/css/#grid

在它最简单的形式中，您可能希望将一组三个要素分成类似的内容，以复制上面提供的示例布局：

<div class="row">
  <div class="col-md-4">
    <p> Feature 1 </p>
  </div>
  <div class="col-md-4">
    <p> Feature 2 </p>
  </div>
  <div class="col-md-4">
    <p> Feature 1 </p>
  </div>
</div>

希望有所帮助！

Answer 3

据我所知，开箱即用的东西可以给你带来理想的效果。但是，最简单的方法是使用列表。看下面的剪切和小提琴。

<强> Fiddle

＆＃13;

＆＃13;

body {
    background: #f2f2f2;
}
.features {
    width: 90%;
    margin: 15px auto;
}
.features > li {
    width: 100%;
    padding: 8px 0;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom: none;
    text-align: center;
}
.features > li:last-child {
    border-bottom: 1px solid #ccc;
}

＆＃13;

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-unstyled features">
    <li>Feature 000</li>
    <li>Feature 001</li>
    <li>Feature 002</li>
    <li>Feature 003</li>
    <li>Feature 004</li>
</ul>

＆＃13;

＆＃13;

＆＃13;