ngx-bootstrap：使用模板排序（水平）答案

【问题标题】：ngx-bootstrap: Sortable with template (horizontally)ngx-bootstrap：使用模板排序（水平）
【发布时间】：2020-04-06 22:13:28
【问题描述】：

我目前在使用 ngx-bootstrap 可排序组件时遇到问题。

我希望能够水平使用可排序组件，而不是文档示例中堆叠的垂直示例。 ngx-bootstrap sortable

是否有人能够通过提供潜在的解决方案来提供帮助，或者能够解释为什么使用 ngx-bootstrap 可能无法做到这一点。

【问题讨论】：

您仍然需要拖放功能，对吧？

标签： html css angular bootstrap-4 ngx-bootstrap

【解决方案1】：

bs-sortable 在内部创建divs 以显示可拖动元素。现在默认情况下div 的display 属性是block，这就是它以垂直堆栈排列的原因。

要使其水平，您只需将 css 属性 display 添加到 inline-block 类中的 sortable-item。

Demo

模板

<div class="row">
  <div class="col">
    <bs-sortable
      [(ngModel)]="itemStringsLeft"
      itemClass="sortable-item"
      itemActiveClass="sortable-item-active"
      placeholderItem="Drag here"
      placeholderClass="placeholderStyle"
      wrapperClass="sortable-wrapper"
    ></bs-sortable>
    <pre class="code-preview">model: {{ itemStringsLeft | json }}</pre>
  </div>
</div>

<div class="row">
  <div class="col">
    <bs-sortable
      [(ngModel)]="itemStringsRight"
      itemClass="sortable-item"
      itemActiveClass="sortable-item-active"
      placeholderItem="Drag here"
      placeholderClass="placeholderStyle"
      wrapperClass="sortable-wrapper"
    ></bs-sortable>
    <pre class="code-preview">model: {{ itemStringsRight | json }}</pre>
  </div>
</div>

styles.css

.sortable-item {
    padding: 6px 12px;
    margin: 4px;
    font-size: 14px;
    line-height: 1.4em;
    text-align: center;
    cursor: grab;
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #adadad;
    display: inline-block;
}

编辑：

如果您只想在特定组件中进行更改，而不是在全局 style.css 中进行更改（这将在全局范围内应用更改），您可以在特定组件中使用 ng-deep 伪选择器。

app.component.css

bs-sortable::ng-deep .sortable-item {
    padding: 6px 12px;
    margin: 4px;
    font-size: 14px;
    line-height: 1.4em;
    text-align: center;
    cursor: grab;
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #adadad;
    display: inline-block;
}

【讨论】：

谢谢。它确实有效，但是我无法覆盖它附带的用户代理样式。出于某种原因，它不允许我用内联覆盖该 display:block 样式？
你检查过我的 stackblitz 演示了吗？您需要将样式放在全局 styles.css 中才能使其工作。内联样式在这里不起作用，因为它是输入属性。
@MylesJeremiah 我已经编辑了新的更新。请看一看。