css 如何在夸托中增加内容列的宽度

velaa5lx  于 2023-02-01  发布在  其他
关注(0)|答案(1)|浏览(129)

我有一个夸托的html页面,有一个侧边栏和一个目录(即一个3栏页面)。我想增加内容栏(中间栏)的默认宽度,现在固定在~ 950 px。我该怎么做?

夸托.yml

project:
  type: website

website:
  title: "Big Center Section"
  sidebar:
    style: "docked"
    search: false
    contents:
      - section: "Sidebar"
        contents:
          - text: "Item 1"
            url:  ./somewhere.html

format:
  html:
    theme:
      - flatly
      - custom.scss
    css: styles.css
    toc: true

木星IPYNB页面

---
title: "Big wide middle section"
jupyter: python3
format:
    html:
        code-fold: true
        code-line-numbers: true
---

Second cell:

# SOME REALLY REALLY REALLY LONG HEADING I WANT 2000px WIDE.....
ni65a41a

ni65a41a1#

更新

    • Quarto 1.3版**允许使用sidebar-widthbody-widthmargin-widthgutter-width选项设置边栏宽度、文档正文、文档边距以及这些元素(装订线)之间的边距。

sidebar-widthbody-widthmargin-width应该以像素(px)为单位指定,gutter-width可以以像素或其他单位(如em或rem)为单位指定。也可以使用SCSS变量。有关详细信息,请阅读来自quarto docs的文章网格定制。

  • _四开本. yml*
project:
    type: website
  
website:
  title: "Big Center Section"
  sidebar:
    style: "docked"
    search: false
    contents:
      - section: "Sidebar"
        contents:
          - index.qmd

format:
  html:
    grid: 
      body-width: 2000px
      sidebar-width: 200px
      margin-width: 200px
    toc: true

旧答案

我们可以通过将width设置为#quarto-document-content的2000px来增加内容列的宽度(同时更改右侧边栏的边距以将其向右推)

  • _四开本. yml*
project:
    type: website
  
website:
  title: "Big Center Section"
  sidebar:
    style: "docked"
    search: false
    contents:
      - section: "Sidebar"
        contents:
          - index.qmd

format:
  html:
    toc: true
    css: styles.css
    • 索引. qmd**
---
title: "Big wide middle section"
jupyter: python3
format:
    html:
      code-fold: true
      code-line-numbers: true
---

# SOME REALLY REALLY REALLY LONG HEADING I WANT 2000px WIDE.....

# SOME REALLY REALLY REALLY LONG HEADING I WANT 2000px WIDE.....

# SOME REALLY REALLY REALLY LONG HEADING I WANT 2000px WIDE.....
    • 样式. css**
/* css styles */

#quarto-document-content {
  width: 2000px;
}

#quarto-margin-sidebar {
  margin-right: -600px;
  margin-left: 500px;
}

(Note我已经缩小了这个网站页面的截图)

相关问题