jquery - bootstrap 3 在它们的 div 中对齐元素

Question

我一直在尝试 Bootstrap ，但一直很难让元素在他们的 div 中对齐。 即在我的 fiddle 中，我试图将内容居中。(位置/电话号码) 第 2 行我试图让它的列表与关于购物者排到一边。

我已经尝试过导航行和其他一些东西。我能找到正确方向的指针吗？请 :)

我见过其他类似的问题，但我发现的问题并没有真正帮助我提出问题。对不起，如果它是重复的。 JsFiddle

  .footer .col-sm-3{
  overflow: hidden;
  }
  .footer-widget {
  margin-bottom: 68px;
  }

  .footer-widget .container {
  border-top: 1px solid #FFFFFF;
  padding-top: 15px;
  }

  .single-widget h2 {
  color: #666663;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 22px;
  text-transform: uppercase;
  }

  .single-widget h2 i{
  margin-right:15px;
  }

  .single-widget ul li a{
  color: #8C8C88;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 300;
  padding: 5px 0;
  display:inline-block;
  }

  .single-widget ul li a i {
  margin-right: auto;
  }

  .single-widget ul li a:hover{
  background:none;
  color:#FE980F;
  }

Answer 1

Bootstrap 使用 12 列，这意味着例如

<div class="row">
    <div class="col-sm-6">I'm the left half</div>
    <div class="col-sm-6">I'm the right half</div>
</div>

在第一行中，您使用 col-sm-2，它仅占屏幕的 1/6。要居中对齐，您真的不需要 Bootstrap ，只需在 css 中执行 text-align:center 即可。可能只有部分文档有行/列，所以如果您只想居中，我会省略第一个。

对于第二部分，您只需增加 jsfiddle 框的大小，它就会彼此相邻对齐。但同样，您应该使用总和为 12 的值。

举个例子: http://jsfiddle.net/6u4cj25h/

请注意我是如何用 xs 替换 sm 的，这意味着即使在小屏幕上，列也不会折叠。