Question

我使用自助井做了一种需要从左到右（水平）的卡片显示器，但由于某种原因，井只想垂直对齐。

＆＃13;

body {
  background-color: #5C67B6;
}

html,
body {
  height: 100%;
  padding-top: 70px;
}

.btn-purple {
  color: #fff;
  background-color: #5C67B6;
  border-color: #5C67B6;
  /*set the color you want here*/
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
  color: #fff;
  background-color: #4b5496;
  border-color: #4b5496;
  /*set the color you want here*/
}

.container {
  display: inline-block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container content-sm">
    <div class="row">
      <div class="col-md-4 col-sm-8">
        <div class="well">
          <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
          <h3 style="text-align: center;">Test!</h3>
          <p>The quick brown fox jumped over the lazy brown dog</p>
          <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
        </div>
        <div class="well">
          <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
          <h3 style="text-align: center;">Test!</h3>
          <p>The quick brown fox jumped over the lazy brown dog</p>
          <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
        </div>
        <div class="well">
          <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
          <h3 style="text-align: center;">Test!</h3>
          <p>The quick brown fox jumped over the lazy brown dog</p>
          <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
        </div>
      </div>
    </div>
  </div>
</body>

＆＃13;

如果您检查了代码段，您会发现在放入每个单独的孔之后它们都是垂直放置的。我使用内联块作为容器并尝试使用它没有运气的井。如何使其水平对齐？

Answer 1

第一个简单的选择就是在主色列中使用色板，其中每个孔都是.col-md-6 .col-xs-12或类似的东西。

下面的片段应该按我认为你所描述的那样。

body {
  background-color: #5C67B6;
}

html,
body {
  height: 100%;
  padding-top: 70px;
}

.btn-purple {
  color: #fff;
  background-color: #5C67B6;
  border-color: #5C67B6;
  /*set the color you want here*/
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
  color: #fff;
  background-color: #4b5496;
  border-color: #4b5496;
  /*set the color you want here*/
}

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
<div class="container content-sm">
    <div class="row">
        <div class="col-sm-6 col-xs-12">
            <div class="well">
                <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
                <h3 style="text-align: center;">Test!</h3>
                <p>The quick brown fox jumped over the lazy brown dog</p>
                <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
            </div>
        </div>
        <div class="col-sm-6 col-xs-12">
            <div class="well">
                <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
                <h3 style="text-align: center;">Test!</h3>
                <p>The quick brown fox jumped over the lazy brown dog</p>
                <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
            </div>
        </div>
        <div class="col-sm-6 col-xs-12">
            <div class="well">
                <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
                <h3 style="text-align: center;">Test!</h3>
                <p>The quick brown fox jumped over the lazy brown dog</p>
                <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
            </div>
        </div>
        <div class="col-sm-6 col-xs-12">
            <div class="well">
                <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
                <h3 style="text-align: center;">Test!</h3>
                <p>The quick brown fox jumped over the lazy brown dog</p>
                <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
            </div>
        </div>
    </div>
</div>
</body>

使水平对齐的自举井居中

1 个答案: