Question

我正在尝试构建一个使用Twitch API的网站，并发布来自7个用户的预定阵列中的哪些用户在线，哪些不在线。它几乎可以工作，但此刻，我的顶部div的边缘没有与我的用户列表的边缘对齐。

这是指向codepen的链接：https://codepen.io/lieberscott/pen/YVZQMG

这是我的一些代码。

HTML：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3">
    </div>
    <div class="col-xs-6 head">
      <span class="title">
        Twitch Streamers
      </span>
        <table>
          <tr>
            <td id="all">ALL</td>
          </tr>
          <tr>
            <td id="online">ONL</td>
          </tr>
          <tr>
            <td id="offline">OFF</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
    <div id="result">

    </div>
</div>

CSS

$blue: #5D6E81;
$gray: #68636B;
$khaki: #B7D0B9;
$title: #F1EBF2;

img {
  border-color: white;
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  height: 50px;
  margin-right: 25px;
  width: 50px;
}

line {
  background-color: $title;
  height: 5px;
}

table {
  float: right;
  font-size: 10px;
  margin-right: 6px;
}

.act {
  background-color: $khaki;
  margin: 1px 0px 1px 0px;
  padding: 8px 8px 8px 15px;
}

.desc {
  color: $gray;
  padding-top: 20px;
}

.desc2 {
  color: $title;
}

.head {
  background-color: $gray;
  color: $title;
  font-size: 40px;
  overflow: hidden;
  padding: 15px 0px 10px 25px;
}

.inact {
  background-color: $blue;
  margin: 1px 0px 1px 0px;
  padding: 8px 8px 8px 15px;
}

.inact a, inact a:hover {
  color: $khaki;
}

.title {
  font-family: 'Days One', sans-serif; 
  font-size: 40px;
}

我能用现有代码做些什么来确保顶部div的宽度与结果一致吗？或者我需要重做吗？

（作为一个注释，我确实使用单行与先前的代码对齐，并将每个结果放在＆＃34; col-xs-6 col-xs-offset-3＆＃34;类中，但这创建了另一个问题是，我不能使每个结果的img，用户名和状态彼此垂直对齐，我更喜欢。）

Answer 1

您在结果前意外关闭了.container。移除</div>包装器正上方的#results，将其向下粘贴，然后排成一行：https://codepen.io/mayersdesign/pen/GmWyWy

Bootstrap列没有排队

1 个答案: