Question

我一直在尝试引导程序，并且很难让项目在他们的div中对齐。也就是在我的小提琴中，我排在最前面，我试图将内容集中在一起。（位置/电话号码）第2行我正试图让它的列表与约束购物者一起形成一排。

我尝试过nav-row和其他一些东西。我能指向正确的方向吗？请：）

我已经看到了类似的其他问题，但我找到的那个问题并没有真正帮助我。对不起，如果它是重复的。 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列，这意味着例如

col-sm-2

在第一行中，您使用text-align:center，这只是屏幕的1/6。要集中对齐，你真的不需要引导程序，只需在css中执行sm即可。可能只有文档的某些部分有行/列，所以如果您只是想要居中，我会放弃第一个。

对于第二部分，您只需要增加jsfiddle框的大小，它就会相互对齐。但同样，你应该使用总计达12的东西。

这是一个例子： http://jsfiddle.net/6u4cj25h/

请注意我如何将xs替换为{{1}}，这意味着即使在小屏幕上，列也不会崩溃。

bootstrap 3对齐div中的项目

1 个答案: