Question

我在将一些引导程序面板彼此对齐时遇到了一些问题。无论我添加什么HTML，它们总是最终在彼此之下。我怎么能让他们彼此相邻？我会在页面上有很多东西。

我的代码：

<section class="bg-grey-50 padding-top-60 padding-top-sm-30">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-4 hidden-xs">
                        <div class="widget">
                            <div class="panel panel-default">
                                <div class="panel-heading">Information</div>
                                <div class="panel-body">

                                    <ul class="panel-list margin-top-1">
                                        <li><i class="glyphicon glyphicon-pencil"></i>Info1</li>
                                        <li><i class="fa fa-graduation-cap"></i>Info1</li>
                                        <li><i class="fa fa-warning"></i>Info1</li>
                                </div>
                            </div>
                        </div>
                        <div class="widget">
                            <div class="panel panel-default">
                                <div class="panel-heading">Information</div>
                                <div class="panel-body">

                                    <ul class="panel-list margin-top-1">
                                        <li><i class="glyphicon glyphicon-pencil"></i>Info2</li>
                                        <li><i class="fa fa-graduation-cap"></i>Info2</li>
                                        <li><i class="fa fa-warning"></i>Info2</li>
                                </div>
                            </div>
                        </div>





                    </div>


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

Answer 1

你不能将widget包裹在另一个col-md-3 col-sm-4 hidden-xs中吗？这样就可以在md尺寸上并排放置4个面板，在sm

上放置3个面板

Codepen http://codepen.io/noobskie/pen/rezaaG

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="bg-grey-50 padding-top-60 padding-top-sm-30">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-4 hidden-xs">
        <div class="widget">
          <div class="panel panel-default">
            <div class="panel-heading">Information</div>
            <div class="panel-body">
              <ul class="panel-list margin-top-1">
                <li><i class="glyphicon glyphicon-pencil"></i>Info1</li>
                <li><i class="fa fa-graduation-cap"></i>Info1</li>
                <li><i class="fa fa-warning"></i>Info1</li>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-4 hidden-xs">
        <div class="widget">
          <div class="panel panel-default">
            <div class="panel-heading">Information</div>
            <div class="panel-body">
              <ul class="panel-list margin-top-1">
                <li><i class="glyphicon glyphicon-pencil"></i>Info2</li>
                <li><i class="fa fa-graduation-cap"></i>Info2</li>
                <li><i class="fa fa-warning"></i>Info2</li>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

Answer 2

您可以尝试使用以下代码来帮助您。

＆＃13;

.widget{
  float : left;
  margin-left : 10px;
  margin-top : 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="bg-grey-50 padding-top-60 padding-top-sm-30">
  <div class="container">
    <div class="row">
      <div class="col-md-12 col-sm-12 hidden-xs">
        <div class="widget">
          <div class="panel panel-default">
            <div class="panel-heading">Information</div>
            <div class="panel-body">
              <ul class="panel-list margin-top-1">
                <li><i class="glyphicon glyphicon-pencil"></i>Info1</li>
                <li><i class="fa fa-graduation-cap"></i>Info1</li>
                <li><i class="fa fa-warning"></i>Info1</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="widget">
          <div class="panel panel-default">
            <div class="panel-heading">Information</div>
            <div class="panel-body">
              <ul class="panel-list margin-top-1">
                <li><i class="glyphicon glyphicon-pencil"></i>Info1</li>
                <li><i class="fa fa-graduation-cap"></i>Info1</li>
                <li><i class="fa fa-warning"></i>Info1</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="widget">
          <div class="panel panel-default">
            <div class="panel-heading">Information</div>
            <div class="panel-body">
              <ul class="panel-list margin-top-1">
                <li><i class="glyphicon glyphicon-pencil"></i>Info1</li>
                <li><i class="fa fa-graduation-cap"></i>Info1</li>
                <li><i class="fa fa-warning"></i>Info1</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

将自举面板彼此对齐

2 个答案: