css 我无法将元素与bootstrap放置在同一行中

btxsgosb 于 2023-03-25 发布在 Bootstrap

关注(0)|答案(3)|浏览(195)

我一直在尝试一段时间，以调整一些元素在同一行，我已经尝试使用 Bootstrap 和flexbox，在每一次尝试，我得到不同的结果，但我似乎不能实现什么我寻找。见图片所附的即时通讯试图做什么。x1c 0d1x此外，这个想法是，当屏幕较小，按比例缩小，以继续适合在同一行，而不打破到下一行。
先谢了！

#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>

css

来源：https://stackoverflow.com/questions/61905716/i-cant-position-elements-in-same-line-with-bootstrap

3条答案

按热度按时间

m0rkklqb1#

你只需要用flex显示一些东西，然后把溢出设置为隐藏，这样它就会缩小。

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

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

最后的结果是这样的，这是jsfiddle，所以你可以玩屏幕大小：https://jsfiddle.net/p3z8tq4r/
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-03-25

wsewodh22#

你可以使用 cssflecbox来实现这一点，请查看我下面的代码示例。

#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);
}

ul{
  display:flex;
  justify-content:space-between;
  padding:0;
  margin:0;
  /*overflow:hidden;*/
}

<!-- 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>

我希望这对你有帮助。如果你只是想在Web开发方面取得更大的进步，请查看我的Web Programming Course

赞(0）回复(0）举报 2023-03-25

agxfikkp3#

这可以根据您的要求工作：我已经删除了你的风格，col-lg和所有这些链接都嵌入到另一个div中，类col-sm-2由于这一点，它也将负责小屏幕尺寸，除此之外，我还包括了css的ul。由于这一点，所有这些链接仍然在同一行，即使你改变屏幕尺寸。你可以了解更多关于css flex：https://www.w3schools.com/css/css3_flexbox.asp

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- Latest compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
      #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 0.2s ease-in-out;
        margin: 5px;
      }
      .col-sm-2 {
        padding: 0;
      }
      #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;
      }
    </style>
  </head>
  <body>
    <!-- Subject Bar -->
    <div id="subject-bar-container" class="container-fluid">
      <div class="row">
        <ul>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="math">Mathematics</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="science">Science</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="history">History</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="art">Art</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="literature">Literature</li>
            </a>
          </div>
          <div class="col-sm-2">
            <a href="#">
              <li id="subject-bar" class="music">Music</li>
            </a>
          </div>
        </ul>
      </div>
    </div>
  </body>
</html>

赞(0）回复(0）举报 2023-03-25

我来回答

css 我无法将元素与bootstrap放置在同一行中

3条答案

相关问题

热门标签

最新问答