Question

我试图了解Bootstrap，但是 - 我无法弄清楚为什么这不适用于xs。我总共有12列，但它仍然将col-xs-11放在col-xs-1下面。

CSS：

  <div id="playButton2" style="width: 260px;height:44px;background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px );border: 3px solid #0059dd; cursor: pointer;" onclick=" 
            var button = document.getElementById('playButton2');
            var player = document.getElementById('player2');
              document.querySelector('#playButton2 .initial').style.display='none';
              document.querySelector('#playButton2 .speaker').style.display='none';
              document.querySelector('#playButton2 .play').style.display='none';
            player.volume=1.0; if (player.paused) {
            document.querySelector('#playButton2 .pause').style.display='inline-block';
            document.querySelector('#playButton2 .play').style.display='none';
            player.play();
            } else {
            document.querySelector('#playButton2 .pause').style.display='none';
            document.querySelector('#playButton2 .play').style.display='inline-block';
            player.pause();
            }" onmouseover="
    var player = document.getElementById('player2');
    player.isPlaying = function () {
        return player.paused === false;
    }
    if  (player.isPlaying()) {
      document.querySelector('#playButton2 .speaker').style.display='none';
      document.querySelector('#playButton2 .pause').style.display='inline-block';
    }"

    onmouseout="
    var player = document.getElementById('player2');
    player.isPlaying = function () {
        return player.paused === false;
    }
    if  (player.isPlaying()) {
      document.querySelector('#playButton2 .pause').style.display='none';
      document.querySelector('#playButton2 .speaker').style.display='inline-block';
    }">


     <svg class="initial" style="margin:15px 124px;" width="12" height="14" viewBox="0 0 85 100"><path fill="white" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path></svg>

    <svg class="pause" style="display: none;margin:15px 125px;" width="10" height="14" viewBox="0 0 60 100"><path fill="#1ed760" d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path></svg>

    <svg  class="speaker" style="display: none;margin:15px 122px;" width="16" height="14" viewBox="0 0 16 14"><path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760" fill-rule="evenodd"></path></svg>

    <svg class="play" style="display: none;margin:15px 124px;" width="12" height="14" viewBox="0 0 85 100"><path fill="#1ed760" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path></svg>

    </div>

    <audio id="player2" style="display:none;">
      <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
    </audio>

HTML：

[class^="col-"] {
  height: 20px;
  background-color: #563d7c;
  background-color: rgba(86,61,124,.35) !important;
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.6);
}

.row {
  margin-top: 15px;
  margin-bottom: 15px;
}

结果xs：

with border-css

without border-css

有人能告诉我这里缺少什么吗？ 2-8-2工作正常，但1-11没有。

我正在使用最新版本的Firefox +我正在使用Bootstrap版本3，不是4 。

修改1：

  <div class="container">
      <div class="row">
        <div class="col-xs-1">1</div>
        <div class="col-xs-11">11</div>
      </div>
      <div class="row">
        <div class="col-xs-2">2</div>
        <div class="col-xs-8">8</div>
        <div class="col-xs-2">2</div>
      </div>
  </div>

Answer 1

正在发生的事情是你的col-xs-1列根据其填充和内容达到其最小宽度，并且不能更小。这意味着col-xs-11没有足够的空间并被推到下一行。

问题是cols有15px左右＆amp;右边填充，所以即使它是空的，你也不能小于30px。

通常你会在最小的屏幕上重新分配cols，为最小的cols分配更多的空间，例如

  <div class="row">
    <div class="col-xs-2 col-s-1">1</div>
    <div class="col-xs-10 col-s-11">11</div>
  </div>

但是，如果这不是一个选项，您可以使用媒体查询来调整较小屏幕的填充，例如：

[class^="col-"] {
  height: 20px;
  background-color: #563d7c;
  background-color: rgba(86,61,124,.35) !important;
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.6);
}

.row {
  margin-top: 15px;
  margin-bottom: 15px;
}

@media (max-width: 400px){
   [class^="col-"] {
        padding-left:5px; 
        padding-right:5px; 
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


  <div class="container">
  <div class="row">
    <div class="col-xs-2 col-s-1">1</div>
    <div class="col-xs-10 col-s-11">11</div>
  </div>
      <div class="row">
        <div class="col-xs-1">1</div>
        <div class="col-xs-11">11</div>
      </div>
      <div class="row">
        <div class="col-xs-2">2</div>
        <div class="col-xs-8">8</div>
        <div class="col-xs-2">2</div>
      </div>
  </div>

（注意，由于某种原因，媒体查询在代码段中无效，但此代码在独立的html页面中有效！）

为什么在Bootstrap中的xs-viewport上拆分列？

1 个答案: