如何在bootstrap 3中严格水平展开/折叠

Question

我正在使用 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>

Answer 1

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

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

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