Reactstrap实现卡片左图右文布局的问题求助

Hey there! Let’s fix those two frustrating issues with your Reactstrap cards—let’s break it down step by step.

First: Fixing the Vertical Flag + Content Layout #

The main reason your flag and content are stacking vertically is the flex-wrap: wrap on your .card class. This tells flexbox to wrap elements onto a new line when there’s not enough horizontal space. We need to disable that wrap, and make sure the card’s contents stay in a single row:

Update your .card CSS to this:

.card {
  display: flex;
  flex-wrap: nowrap; /* Replace wrap with nowrap to keep everything in one row */
  flex-direction: row; /* Explicitly set horizontal layout (default is row, but this makes it clear) */
  align-items: center; /* Vertically center the flag and content */
  padding: 8px;
  text-align: left;
  width: 100%;
  height: 90%;
  background-color: var(--background-color-light);
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: var(--box-shadow);
  font-weight: 500;
  transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
  cursor: pointer;
}

Also, your .icon class has an extra img selector that’s unnecessary—since Reactstrap’s CardImg is already an <img> tag, you can move the border-radius directly to .icon:

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px!important;
  min-width: 70px;
  margin-right: 12px; /* Add a little more space between flag and content */
  border-radius: 2px; /* Move the border-radius here from .icon img */
}

Second: Stopping Content from Overflowing the Card #

Your content is spilling out because nothing is telling it to wrap when it hits the card’s edge. Let’s add rules to handle long text and the language badges:

Update your .body class to control text overflow:

.body {
  flex: 1; /* Let the content area take up all remaining space in the card */
  align-self: stretch; /* Make the content area match the card's height (optional, but looks cleaner) */
  font-weight: 500;
  font-size: 16px;
  text-align: left;
  padding: 0 8px; /* Add padding so content doesn't hug the card edges */
  overflow-wrap: break-word; /* Force long text to wrap instead of overflowing */
  display: flex;
  flex-direction: column; /* Keep content inside the body stacked vertically */
  justify-content: center; /* Vertically center the body content (optional) */
}

And fix the language badges so they wrap instead of overflowing:

.tag {
  display: flex;
  flex-wrap: wrap; /* Let badges wrap to new lines if there are too many */
  gap: 4px; /* Add small spacing between badges */
  margin: 8px 0; /* Add vertical spacing around the badges for better layout */
}

Full Updated CSS #

Here’s the complete CSS with all the fixes applied:

.row {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  margin-right: -12px;
  margin-left: -12px;
}
.card {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  padding: 8px;
  text-align: left;
  width: 100%;
  height: 90%;
  background-color: var(--background-color-light);
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: var(--box-shadow);
  font-weight: 500;
  transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
  cursor: pointer;
}
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px!important;
  min-width: 70px;
  margin-right: 12px;
  border-radius: 2px;
}
.body {
  flex: 1;
  align-self: stretch;
  font-weight: 500;
  font-size: 16px;
  text-align: left;
  padding: 0 8px;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tag {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0;
}
.price {
  text-align: right;
  margin-bottom: 8px;
}

Quick Bonus Tip #

I noticed a tiny typo in your component name: CountiresTable should be CountriesTable—not a big deal, but fixing it will keep your code clean!

After making these changes, your cards should keep the flag on the left, content on the right, and nothing will spill outside the card borders.

内容的提问来源于stack exchange，提问作者Chris