html - 我无法使用 bootstrap 将元素定位在同一行

Question

我已经尝试了一段时间将一些元素对齐在同一行上，我尝试使用 bootstrap 和 flexbox，每次尝试，我都会得到不同的结果，但我似乎无法实现我想要的。请参阅所附图片，了解我正在尝试做什么。 此外，这个想法是，当屏幕较小时，缩小规模以继续适应同一行，而不会中断到下一行。

提前致谢!

#subject-bar-container {
	background-color: #2c2c2c !important;
	border-top: 1px solid white;
	width: 100%
}

#subject-bar {
	width: 12em;
	height: 5em;
	color: white;
	font-weight: lighter;
	background-color: blue;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all .2s ease-in-out;
	margin: 5px;
}

#subject-bar:hover {
	transform: scale(1.02);
}

a:hover {
	text-decoration: none !important;
}

.math {
	background-image: linear-gradient(to bottom left, #0C144E, #6565B9);
}

.science {
	background-image: linear-gradient(to bottom left, #3C0C4E, #AF65B9);
}

.history {
	background-image: linear-gradient(to bottom left, #4E4E0C, #B9B665);
}

.art {
	background-image: linear-gradient(to bottom left, #4E300C, #B99965);
}

.literature {
	background-image: linear-gradient(to bottom left, #205259, #4B9D90);
}

.music {
	background-image: linear-gradient(to bottom left, #0C325F, #60A6B7);
}

<!-- Subject Bar -->
    <div id="subject-bar-container" class="container-fluid">
        <div class="row">
            <ul>
                <a href="#">
                    <li id="subject-bar" class="math col-lg">Mathematics</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="science col-lg">Science</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="history col-lg">History</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="art col-lg">Art</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="literature col-lg">Literature</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="music col-lg">Music</li>
                </a>
            </ul>
           </div> 
    </div>

Answer 1

你只需要显示一些东西作为 flex 并将你的溢出隐藏起来，这样它就会缩小。看看我在这里做了什么。我所做的就是将此代码添加到您的 CSS

   .row ul * {
      display:flex;
      overflow: hidden;
    }

    ul{
      display:flex;
      justify-content:space-between;
      padding:0;
      margin:0;
    }

最终结果是这样的，这是 jsfiddle，这样你就可以调整屏幕尺寸:https://jsfiddle.net/p3z8tq4r/

#subject-bar-container {
	background-color: #2c2c2c !important;
	border-top: 1px solid white;
	width: 100%
}

#subject-bar {
	width: 12em;
	height: 5em;
	color: white;
	font-weight: lighter;
	background-color: blue;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all .2s ease-in-out;
	margin: 5px;
}

#subject-bar:hover {
	transform: scale(1.02);
}

a:hover {
	text-decoration: none !important;
}

.math {
	background-image: linear-gradient(to bottom left, #0C144E, #6565B9);
}

.science {
	background-image: linear-gradient(to bottom left, #3C0C4E, #AF65B9);
}

.history {
	background-image: linear-gradient(to bottom left, #4E4E0C, #B9B665);
}

.art {
	background-image: linear-gradient(to bottom left, #4E300C, #B99965);
}

.literature {
	background-image: linear-gradient(to bottom left, #205259, #4B9D90);
}

.music {
	background-image: linear-gradient(to bottom left, #0C325F, #60A6B7);
}


.row ul * {
  display:flex;
  overflow: hidden;
}

ul{
  display:flex;
  justify-content:space-between;
  padding:0;
  margin:0;
}

<div id="subject-bar-container" class="container-fluid">
        <div class="row">
            <ul>
                <a href="#">
                    <li id="subject-bar" class="math col-lg">Mathematics</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="science col-lg">Science</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="history col-lg">History</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="art col-lg">Art</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="literature col-lg">Literature</li>
                </a>
                <a href="#">
                    <li id="subject-bar" class="music col-lg">Music</li>
                </a>
            </ul>
           </div> 
    </div>