在.row上的Css子选择器不工作？

Question

我完全不确定它与我的选择器有什么关系。我正在使用bootstrap，我试图使.row的三个按钮在同一行上，即使在宽度＆lt; 576px。我尝试将flex-wrap属性更改为nowrap。但它没有用。 HTML：

<div class="container">
        <div id="button-container">
            <div class="row">
                <div class="col-md-4 col-sm-4 col-xm-4">
                    <button type="button" class="btn btn-outline-primary active" id="all">All</button>
                </div>
                <div class="col-md-4 col-sm-4 col-xm-4">
                    <button type="button" class="btn btn-outline-primary" id="online">Online</button>
                </div>
                <div class="col-md-4 col-sm-4 col-xm-4">
                    <button type="button" class="btn btn-outline-primary" id="offline">Offline</button>
                </div>
            </div>
        </div>
    </div>

CSS：

 @media screen and (max-width: 576px) {
    .container{
        width: 100%;
    }
    .btn{
        width: 100px;
    }
    #button-container>row{
        flex-wrap: nowrap;
    }
 }

Answer 1

使用 col-xs-4 代替 col-xm-4 。

无需编写媒体查询

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div id="button-container">
    <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-4">
        <button type="button" class="btn btn-outline-primary active" id="all">All</button>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-4">
        <button type="button" class="btn btn-outline-primary" id="online">Online</button>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-4">
        <button type="button" class="btn btn-outline-primary" id="offline">Offline</button>
      </div>
    </div>
  </div>
</div>

如果您无法在媒体查询下更改HTML部分，请使用（您在媒体查询中.之前未使用row）

@media screen and (max-width: 576px) {
  #button-container>.row {
    display: flex;
  }
  #button-container>.row>div {
    flex: 1;
  }
}