如何在Trello中调整列表的列宽大小？

您如何在Trello中调整列表的列宽大小？

在Trello的当前实现中，这是不可配置的：列表的编程大小介于300-210像素之间，具体取决于可用空间。

但是，如果您不介意任何改动，则可以使用一些JavaScript自行解决：

(function(w) {
    $('.list').width(w);
    $('.list-area').width($('.list').length * (w+12));  // 12px inter-list spacing
    $('body').addClass('layout-horiz-scroll');  // force-enable horizontal scrolling
})(500)

（用您所需的像素宽度替换500。）

您可以在浏览器的控制台上执行此操作，也可以将其另存为以下bookmarklet，以在需要更多宽度时单击：

javascript:(function(w) { $('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(500)

编辑：小书签请求您实际所需大小的另一个选项是：

javascript:(function(w) { $('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(prompt("List width?", 500))

它不会验证答案，因此，如果输入的内容不是数字，则将无法使用。

为了扩大卡片的细节，可以使用以下书签脚本：

javascript:(function(w) { 
$('.window').css('width', w+'px');
$('.window-main-col').css('width', (w-184)+'px');
})(prompt("New Width? (default 730)", 1030))

对我来说，在全高清显示器上添加300px看起来更好

这是一个稍微更新的答案，因为Trello现在将董事会列表的布局设置为，display: flex而不是display: block，所以这种width扭曲将不再起作用。

另外，请注意，Trello帐篷将样式注入到创建的每个新卡中。因此，最好创建一个观察者并监视页面的DOM更改，并始终实施样式更改。

var newWidth = 400;
var cardNewHeight = 40;
function enforceNewWidth() {
  (function(w) {
      $('.list').css({flex: '0 0 ' + w + 'px'});

      // updated 2015-04-01
      $('.list').css('max-width', w + 'px');

      $('.list-card').css('max-width', w + 'px');
      $('.list-card').css('min-height', cardNewHeight + 'px');
      // $('.list-area').width($('.list').length * (w+12));  // 12px inter-list spacing    
      $('textarea.list-card-composer-textarea').css({width: (w - 40) + 'px'});
  })(newWidth);
}

enforceNewWidth();

var observer = new MutationObserver(function(mutations) {
  enforceNewWidth();
});

observer.observe(document, {childList: true, subtree: true});

我试图缩小列表的范围，因为我目前的董事会有很多，而且对于几乎所有董事会来说，图块都是卡宽度的75％（实际上，我认为如果只计算一下我仍然可以获得多数席位）标题少于卡片宽度的50％的标题）。

我尝试了这里建议的JS脚本（虽然不是最新的），但确实确实使列表变窄了，但并没有消除它们之间新形成的差距。因此，我想出了这个原始方法，但是做到了“绝招”：

1. 按Ctrl +'-'，直到获得所需的列表宽度（可能是所有列表都适合屏幕时）
2. 到目前为止，文本可能很小，因此打开元素检查器并编辑.list-card-title的css并增加字体大小（我添加了'font-size：large;'看起来就足够了）。
3. （可选）如果您看到'g's并缺少其下部，则可能需要添加一些底部填充像素（我添加了10个像素）。

如果要增加列表宽度，则相反的方法（放大并缩小文本）可能会起作用。

正如我之前所说，这可能不是处理事情的“正确”方法，但是它使我得到了想要的结果，而且很快。

这不是可用的选项，因此Trello中的列宽是固定的。

现在，网上商店中有一个Chrome附加组件，名为“ Trello的苗条列表”：

https://chrome.google.com/webstore/detail/slim-lists-for-trello/pjlejgbmijmafmobaofcgblpdbkaodod

1. 下载Pro4Trello Free Chrome扩展程序

2. 勾选“应用自定义CSS”并添加以下内容：

   .list {
     width: 375px;
   }
   
   .list-wrapper {
     width: 375px;
   }
   

Firefox现在有一个附加功能：Trello Super Powers。