【问题标题】:How to make expand/collapse in bootstrap 3 stricly horizontal如何在bootstrap 3中严格水平展开/折叠
【发布时间】:2018-01-28 14:24:26
【问题描述】:

我正在使用 bootstrap 3。我的想法是通过单击一个按钮在其他单词(字典中的转录)之间展开/折叠一些单词。

它们之间的单词和转录都有display: "inline-block"类。有没有办法进行严格的水平过渡,并避免这种显示:“块”的一部分?面板标题应始终在一行中。 (并避免编写额外的js)

        <div class="panel-heading">
          <div class="note">{{note}} </div>
          <div class="word -arabic-text-big">{{word}}</div>
          <div class="collapse transcription">[******]</div>
        </div>
        <button type="button" class="btn btn-info" 
            data-toggle="collapse" data-target=".transcription">
        Transcipt
        </button>

【问题讨论】:

    标签: css twitter-bootstrap twitter-bootstrap-3 collapse expand


    【解决方案1】:

    抱歉,答案太简单了。但在我做错事之前……

        .note, .word, .transcription {
        display: inline-block;
    }
    
    .transcription.collapse.in {
        display: inline-block;
    }
    .transcription.collapse {
        display: none;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-10-28
      • 2013-09-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多