相关疑难解决方法(0)

自从Firefox Nightly(35.0a1)的最新版本(？)发布以来,我一直遇到text-overflow: ellipsis一个Flexbox容器内部的问题flex-direction: row,每列的宽度为50%.

演示:

.container {
  width: 300px;
  background: red;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column {
  flex-basis: 50%;
}

.column p {
  background: gold;
  
  /* Will not work in Firefox Nightly 35.0a1 */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="container">
  <div class="row">
    <div class="column">
      <p>Captain's Log, Stardate 9529.1: This is the final cruise of the starship Enterprise under my command. This ship and her history will shortly …

我想知道是否有人可以给我一个关于如何计算flexbox布局的简单介绍,特别是在哪个优先级顺序中,例如:

    <div id="container" style="display: flex; flex-direction: row; flex-wrap:wrap;">
    <div style="flex: 1 0 200px; height:200px; background-color: lightgreen;"></div>
    <div style="flex: 1 1 400px; height:200px; background-color: lightyellow;"></div>
    <div style="flex: 1 0 200px; height:200px; background-color: lightblue;"></div>
</div>

如果我将容器宽度小于600px,我觉得很有意思; 收缩将在缩小之前生效(我将第二个黄色块设置为flex: 1 1 400px;),转为3行,然后收缩效果直到容器达到200px;

我想知道flexbox布局决定的顺序/规则是什么？为什么它不会从400块缩小？

甚至我还将所有三个块设置flex: 1 1 their basis size;为包裹仍然首先发生.

谢谢

目前页面如下所示：

现在调整到移动屏幕弹性框会溢出容器：

网址：

       <div id="bars" class="d-flex flex-row text-white  text-center">
            <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
                <i class="fa fa-home d-block"></i> Home
            </div>
            <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
                 <i class="fa fa-graduation-cap d-block"></i> Resume
            </div>
            <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#work">
                 <i class="fa fa-folder-open d-block"></i> Work
            </div>
            <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
            <i class="fa fa-envelope d-block"></i> Contact
            </div>
            </div>

CSS，我尝试使用媒体但没有改变

.port-item {
width: 30%;
}

@media(min-width: 768px) {
  #bars {
    flex-direction: column;
  }
}

如何使它们适合容器或使它们显示在列上

类似于这个问题Bootstrap 3 - 带固定包装的网格 - 防止列堆叠我需要阻止我的引导列包裹.

然而,我遇到的问题是,如果超过12列,我需要它来保持不包装.就像使用col-xs一样,当你有12列时,第13个将会换行 - 如本例所示,bootply http://www.bootply.com/n5KdXfK7gZ#

如果你看下面我的bootply中的HTML - 我希望第四列(备用.col-4)与前12列保持同一行.

<div class="container-fixed">
  <div class="row">
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">spare .col-4</div>
  </div>
  <hr>
</div>

我需要我的附加列继续与前12行相同的行.我不介意它们滚动可见视口创建滚动条,但我不希望它们换行.

这样我可以有一个幻灯片进/出动画,类似于bootstrap uis carousel,接受我不能使用轮播,因为我需要它在桌面模式下表现完全不同.

我希望这是有道理的 :)