Выравнивание текста на карточке dbc – сюжетное тире
Кажется, я не могу изменить выравнивание текста на карте dbc. Используя приведенное ниже, я хочу переместить 100 на карте 2 вниз. Я пытаюсь переместить его вверх или вниз, но ничего не получается. У меня есть определенные размеры карточек, которые мне нужно поддерживать, поэтому мне бы очень хотелось сохранить их фиксированную высоту и просто иметь возможность сдвигать текстовое поле.
Я не обязательно хочу, чтобы текст был точно упорядочен. Мне нужно иметь возможность переключаться вверх и вниз.
В идеале хотелось бы использовать карты, но я не против использования отдельного варианта.
import dash
from dash import Dash, dcc, html
import dash_bootstrap_components as dbc
external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets = external_stylesheets)
cards = dbc.CardGroup(
[
dbc.Card(
dbc.CardBody(
[
html.H5("Card 1", className = "card-title"),
html.P(
"This card has some text content, which is a little "
"bit longer than the second card.",
className = "card-text",
),
html.P(
100,
className = "card-text text-center align-self-bottom",
),
]
)
),
dbc.Card(
dbc.CardBody(
[
html.H5("Card 2", className = "card-title"),
html.P(
"This card has some text content.",
className = "card-text",
),
html.P(
100,
style = {"marginBottom": -50, 'paddingBottom':-500},
className = "card-text text-center align-self-bottom",
),
]
)
),
dbc.Card(
dbc.CardBody(
[
html.H5("Card 3", className = "card-title"),
html.P(
"This card has some text content, which is longer "
"than both of the other two cards, in order to "
"demonstrate the equal height property of cards in a "
"card group.",
className = "card-text",
),
html.P(
100,
className = "card-text text-center align-self-bottom",
),
]
)
),
]
)
app.layout = dbc.Container([
dbc.Row(
[
dbc.Col(cards),
]
)
])
if __name__ == '__main__':
app.run_server(debug=True, port = 8050)
Ответы 1
Проще всего было бы хранить это содержимое вне тела карты, т.е. как дочерний элемент dbc.Card(), который идет после dbc.CardBody():
cards = dbc.CardGroup([
dbc.Card([
dbc.CardBody([
html.H5("Card 1", className = "card-title"),
html.P(
"This card has some text content, which is a little "
"bit longer than the second card.",
className = "card-text",
)
]),
html.P(
100,
className = "card-text text-center",
)
]),
dbc.Card([
dbc.CardBody([
html.H5("Card 2", className = "card-title"),
html.P(
"This card has some text content.",
className = "card-text",
)
]),
html.P(
100,
className = "card-text text-center",
)
]),
dbc.Card([
dbc.CardBody([
html.H5("Card 3", className = "card-title"),
html.P(
"This card has some text content, which is longer "
"than both of the other two cards, in order to "
"demonstrate the equal height property of cards in a "
"card group.",
className = "card-text",
)
]),
html.P(
100,
className = "card-text text-center",
)
])
])
[Редактировать]
В идеале я бы выровнял 100 вверх на всех трех карточках, чтобы они были центрированы по горизонтали И выровнены посередине между текстом выше и границей ниже.
В этом случае вы можете добавить класс card-body к каждому абзацу, чтобы они растягивались так же, как компонент dbc.CardBody над ними (т. е. два тела получали одинаковое пространство, соответствующее высоте карточки), а затем отрегулировать их на добавляем несколько стилей:
html.P(
100,
className = "card-text text-center card-body",
style = {
'paddingTop': '0',
'position': 'relative', # <- if needed set this and
'top': '-2px' # <- adjust here
}
)
@tonydanza123 tonydanza123 ок, понятно, думаю, у меня (может быть) есть решение этой проблемы, но я не понимаю, что определяет выбор карт 1 и 2? это статический или динамический выбор? Я имею в виду, является ли это уже известным произвольным выбором (т. е. вы можете использовать определенные классы, чтобы различать каждый «вид» карты и произвольно регулировать их сдвиг, используя соответствующие селекторы CSS)? Или это зависит от доступного места, оставшегося в теле карты (которое определяется высотой родительской карты минус высота карты с самой высокой высотой в той же строке)?
Последний, с изменением высоты карт и доступного пространства для каждого конкретного компонента. Используя приведенное выше, я бы в идеале выровнял 100 вверх на всех трех карточках, чтобы они были центрированы по горизонтали И выровнены посередине между текстом выше и границей ниже.
Хорошо, спасибо, перефразировав так, становится понятнее, см. исправленный ответ.
Спасибо @EricLavault, но я хочу большей автономии в отношении текста. Не обязательно в горизонтальном ряду. Используя ваш пример, я хочу переместить 100 вверх для карты 1 и 2.