st.columns

插入布局为并排列的容器。

插入多个并排布局的多元素容器，并返回容器对象的列表。

要向返回的容器中添加元素，您可以使用with表示法（推荐）或直接在返回的对象上调用方法。请参见下面的示例。

列只能嵌套在其他列中，最多只能嵌套一层。

警告

侧边栏中的列不能放置在其他列内。这只能在应用程序的主区域中实现。

函数签名[source]

st.columns(spec, *, gap="small", vertical_alignment="top", border=False)

参数

spec (int 或数字的 Iterable)

控制要插入的列的数量和宽度。可以是以下之一：

  • 一个整数，指定列的数量。在这种情况下，所有列的宽度相等。
  • 一个数字的 Iterable（int 或 float），指定每列的相对宽度。例如，[0.7, 0.3] 创建两列，其中第一列占据可用宽度的 70%，第二列占据 30%。 或者 [1, 2, 3] 创建三列，其中第二列的宽度是第一列的两倍，第三列的宽度是第一列的三倍。

gap ("small", "medium", or "large")

列之间的间隙大小。默认值为"small"。

vertical_alignment ("top", "center", or "bottom")

列内内容的垂直对齐方式。默认是"top"。

border (bool)

是否在列容器周围显示边框。如果这是False（默认），则不显示边框。如果这是True，则在每列周围显示边框。

返回

(list of containers)

容器对象的列表。

示例

示例 1：使用上下文管理

你可以使用with语句将任何元素插入到列中：

import streamlit as st

col1, col2, col3 = st.columns(3)

with col1:
    st.header("A cat")
    st.image("https://static.streamlit.io/examples/cat.jpg")

with col2:
    st.header("A dog")
    st.image("https://static.streamlit.io/examples/dog.jpg")

with col3:
    st.header("An owl")
    st.image("https://static.streamlit.io/examples/owl.jpg")
Built with Streamlit 🎈

示例2：将命令用作容器方法

你可以直接在返回的对象上调用方法：

import streamlit as st
import numpy as np

col1, col2 = st.columns([3, 1])
data = np.random.randn(10, 1)

col1.subheader("A wide column with a chart")
col1.line_chart(data)

col2.subheader("A narrow column with the data")
col2.write(data)
Built with Streamlit 🎈

示例3：对齐小部件

使用 vertical_alignment="bottom" 来对齐小部件。

import streamlit as st

left, middle, right = st.columns(3, vertical_alignment="bottom")

left.text_input("Write something")
middle.button("Click me", use_container_width=True)
right.checkbox("Check me")
Built with Streamlit 🎈

示例4：使用垂直对齐创建网格

调整垂直对齐以自定义您的网格布局。

import streamlit as st
import numpy as np

vertical_alignment = st.selectbox(
    "Vertical alignment", ["top", "center", "bottom"], index=2
)

left, middle, right = st.columns(3, vertical_alignment=vertical_alignment)
left.image("https://static.streamlit.io/examples/cat.jpg")
middle.image("https://static.streamlit.io/examples/dog.jpg")
right.image("https://static.streamlit.io/examples/owl.jpg")
Built with Streamlit 🎈

示例 5：添加边框

为您的列添加边框，而不是使用嵌套容器，以实现一致的高度。

import streamlit as st

left, middle, right = st.columns(3, border=True)

left.markdown("Lorem ipsum " * 10)
middle.markdown("Lorem ipsum " * 5)
right.markdown("Lorem ipsum ")
Built with Streamlit 🎈
Previous: Layouts and containersNext: st.container
forum

还有问题吗？

我们的 论坛 充满了有用的信息和Streamlit专家。