时间戳

首页 > 解决方案 > 如何让我的图片在左边，文字在右边（Bootstrap）

html - 如何让我的图片在左边，文字在右边（Bootstrap）

问题描述

body{
    height: 100%;
    font-size: 1rem ;
}
.navbar-brand{
    font-family: 'Syne Mono', monospace;
    color: black;
    size: 0.5rem;
}
header {
  width: 100%;
  height: 100vh;
  background: rgb(237,104,104);
background: linear-gradient(90deg, rgba(237,104,104,1) 0%, rgba(232,118,118,1) 50%, rgba(236,159,159,1) 100%);
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.navbar-color{
    background: rgb(237,104,104);
background: linear-gradient(90deg, rgba(237,104,104,1) 0%, rgba(232,118,118,1) 50%, rgba(236,159,159,1) 100%);
}
.nav-link{
    color: white;
}
<!--Navbar-->
    <nav class="navbar navbar-expand-lg navbar-color bg-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"></a>
                    </li>
                </ul>
            </div>
        </div>  
    </nav>
        <!--Header-->
    <header>
        <div class="container-fluid">
        <div class="col-md-6"><img src="/images/Online shopping _Outline.svg" alt="shoppingicon">
    <div class="col-md-6">Textrheoefjfoj
    </div>
    </div>
    </header>

</body>
</html>

你好！我还是 Web 开发的新手。有人建议我使用 bootstrap，这样我可以更轻松地学习 Web 开发。我不知道网格 100% 是如何工作的，所以我想知道如何将我的图片放在左侧，将我的文字放在旁边。基本上是我想要的一个例子，右边的图片和左边的文字。

标签： htmlcssbootstrap-4

解决方案

您需要将您的课程包装div's起来row：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <img src="/images/Online shopping _Outline.svg" alt="shoppingicon">
        </div>
        <div class="col-md-6">
            Textrheoefjfoj
        </div>
    </div>
</div>

就像这里的 Boostrap 网格系统

<div class="container">
  <div class="row">
    <div class="col">
      The First column
    </div>
    <div class="col">
      The Second column
    </div>
  </div>
</div>

推荐阅读