Как разместить две кнопки рядом друг с другом в Streamlit: CSS Flexbox и особенности макета Streamlit

Чтобы разместить две кнопки рядом друг с другом в Streamlit, вы можете использовать комбинацию стилей CSS и функций макета Streamlit. Вот несколько методов, которые вы можете попробовать:

  1. Использование CSS Flexbox:

    • Определите элемент-контейнер нужной ширины и отобразите его как гибкий контейнер.
    • Установите для свойства justify-contentзначение space-between, чтобы распределить кнопки равномерно.
    • Поместите кнопки внутрь контейнера.

    пробел между;
    ширина: 300 пикселей;

    «»»,
    unsafe_allow_html=True,
    )
    с st.container () как button_container:
    st.button(“Кнопка 1”)
    st.button(“Кнопка 2”)

  2. Использование beta_columnsStreamlit:

    • Используйте функцию beta_columns, чтобы создать два столбца одинаковой ширины.
    • Поместите каждую кнопку в отдельный столбец.
    import streamlit as st
    col1, col2 = st.beta_columns(2)
    col1.button("Button 1")
    col2.button("Button 2")
  3. Использование столбцовStreamlit:

    • Используйте функцию columns, чтобы создать два столбца одинаковой ширины.
    • Поместите каждую кнопку в отдельный столбец.
    import streamlit as st
    col1, col2 = st.columns(2)
    col1.button("Button 1")
    col2.button("Button 2")

Эти методы позволяют разместить две кнопки рядом друг с другом в приложении Streamlit. Не стесняйтесь выбирать тот, который лучше всего соответствует вашим потребностям.