可编辑 - 显示编辑框内联而不是阻止？

Question

有没有办法让Jeditable将编辑框显示为内联元素而不是块？我也在使用Bootstrap 3.我尝试在JS中添加带有各种值的“style”属性，但它们似乎没有任何影响？

以下是它最初的样子：

但这是我开始使用jeditable编辑值时的显示方式：

这就是我希望它出现的方式：

相关HTML：

nm /tmp/lib/libmongoclient.so | grep curTime
00000000000ea510 t _ZN5mongo13curTimeMicrosEv
00000000000ea4f0 t _ZN5mongo15curTimeMicros64Ev
00000000000ea440 t _ZN5mongo15curTimeMillis64Ev

JS：

<div class="col-sm-4">
    <span id="songtitle-CD001-1" class="edit-song">Song number 1</span> 
    (<span id="songdura-CD001-1" class="edit-song">00:03:16</span>)
    <br />
    <span id="songtitle-CD001-2" class="edit-song">Song number 2</span> 
    (<span id="songdura-CD001-2" class="edit-song">00:03:46</span>)
    <br />
</div>

我还尝试将样式直接添加到标记中：

// Edit song text
$('.edit-song').editable('templates/edits/edit-song.php', {
    indicator: 'Saving...',
    tooltip: 'Click to edit...'
});
$('.edit-song-area').editable('templates/edits/edit-song.php', {
    type: 'textarea',
    submit: 'OK',
    cancel: 'Cancel',
    indicator: 'indicator',
    tooltip: 'Click to edit...',
    style: 'inherit' // I have also tried "display: inline' 
});

但这似乎被忽略了？即使在<span title="Click to edit..." id="songtitle-CD001-1" class="edit-song" style="display:inline;">Song number 1</span> 之后：

!important

有没有办法强制jeditable元素显示内联？

Answer 1

啊，没关系。即使在“.edit-song-area”中另外定义了edit元素，display：inline部分也必须在父元素中，如下所示：

// Edit song text
$('.edit-song').editable('templates/edits/edit-song.php', {
    indicator: 'Saving...',
    tooltip: 'Click to edit...',
    style: 'display: inline' // <-- Must be here
});
$('.edit-song-area').editable('templates/edits/edit-song.php', {
    type: 'textarea', // ...even though the other parts are defined here
    submit: 'OK',
    cancel: 'Cancel',
    indicator: 'indicator',
    tooltip: 'Click to edit...',
});