个人中心
gpt4 book ai didi

html - 使用我可以应用于我的代码的 Bootstrap 制作列的最佳方法是什么？

转载 作者：太空宇宙 更新时间：2023-11-04 06:24:52 25 4
gpt4 key购买 nike

我正在关注 this youtube 上的教程，当需要查看我的作品并将文本与图标水平对齐时，它们仍然堆叠在一起。使用 Bootstrap 网格系统将它们水平对齐而不是彼此堆叠的替代方法是什么？我不知道如何解决这个问题，教程似乎更适合中级编码人员。

body {
    font-size: 15px;
    font-family: arial,helveitca,sans-serif;
    padding: 0;
    margin: 0;
    background-color: #dcdde1; 
}

.container{
    width:80%;
    margin: auto;
    overflow: hidden;
}

ul{
    margin: 0;
    padding: 0;
}

/* ------------ header ----------  */

header {
background: #7f8fa6;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #192a56 3px solid;
}


header a{
    color:#ffffff;
    text-decoration:none;
    text-transform: uppercase;
    font-size:16px;
    
}

header li {
    float:left;
    display:inline;
    padding: 0 20px 0 20px;
}

header #branding {
    float:left;
}

header #branding h1 {
    margin: 0;
}

header nav {
    float:right;
    margin-top:10px;
}

header .highlight, header .current a {
    color: #40739e;
    font-weight: bold;
}

header a:hover{
    color:#cccccc;
    font-weight: bold;
}

/*-----------showcase------------*/

#showcase {
    min-height: 400px;
 background:url(../images/laptop.png);
     background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color:white;
}

#showcase h1 {
    margin-top:100px;
    font-size:55px;
    margin-bottom: 10px;
}

#showcase p {
    font-size: 20px;
}

/*-----------newsletter--------------*/

#newsletter {
    padding:15px;
    color:white;
    background: #7f8fa6
}

#newsletter h1{
    float:left;
}

#newsletter form {
    float:right;
    margin:15px;
}

#newsletter input[type="email"]{
    padding:4px;
    height:40px;
    width: 250px;
}

.button_1{
    height:40px;
    background-color: #fbc531;
    border:0;
    padding-left: 20px;
    padding-right: 20px;
    color:#353637;
}

#boxes {
    margin-top: 20px;
    
}

#boxes .box {
    float:left;
    text-align: center;
    width:30%;
    padding:10px;
}

footer {
    padding:20px;
    margin-top: 20px;
    color:white;
    background:7f8fa6;
    text-align: center;
}
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta name="description" content="Affordable Web Design For Small and Medium-sized Companies">
    <meta name="author" content="Keith Segovia">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <link rel="stylesheet" type="text/css" href="normalize.css-master/normalize.css">
    
      <link rel="stylesheet" href="css/mainfollow.css" type="text/css">

    <title>Youtube Tutorial 1</title>

  </head>

  <body>
    <header>
      <div class="container">
        <div id="branding">
          <h1>
            <i class="fa fa-rocket"></i> <span class="highlight">1-2-3</span> Web Design
          </h1>
        </div>
        <nav>
          <ul>
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="services.html">Services</a></li>
          </ul>
        </nav>
      </div>

    </header>
    <section id="showcase">
      <div class="container">
        <h1>Affordable Web Design For Small and Medium-sized Companies</h1>
        <p>d stamp, an am rudely strut befor made to court an amber To this fair proportive to deep bounting upon of the souls of York; And now, insteadful merry merry mer bruised fore our bruised fright the capers nimbly instern al.</p>
      </div>

    </section>

    <section id="newsletter">
      <div class="container">
        <h1>Get Our Newsletter</h1>
        <form action="">
          <input type="email" placeholder="Enter your email here">
          <button type="submit" class="button_1">Subscribe
                 
             </button>
        </form>

      </div>

    </section>

    <section id="boxes">
      <div class="container">
      <div class="row">
      <div class="col-lg-4">
       
        <div class="box"><i class="fa fa-signal fa-5x"></i>
          <h3>Grow Your Audience</h3>
          <p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
          </div>
           </div>
           </div>
            </div>
            
        <div class="container">
          <div class="box "><i class="fa fa-photo fa-5x"></i>
           
            <h3>Modern Web Design</h3>
            <p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
             </div>
              </div>
            

          <div class="container">
            <div class="box"><i class="fa fa-cube fa-5x"></i>
               <div class="row">
      <div class="col-lg-4">
              <h3>Ultra Fast Hosting</h3>
              <p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
            </div>
             </div>
              </div>
               </div>
               

      </section>



    <footer>
    <p>1-2-3 Web Design Copyright &copy; 2019</p>
    </footer>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

</html>

最佳答案

使用 bootstrap 创建列

第 1 步 - 创建容器。

第 2 步 - 在容器内创建行。

第 3 步 - 创建列(同时使用网格系统屏幕分为 12 列)。

所以如果你想创建 3 个相等的列，那么 col-md-4 + col-md-4 + col-md-4= 12columns

如果要创建 2 个相等的列，则 col-md-6 + col-md-6 = 12 列

如果要创建不同大小的列，请根据选择创建部分(例如，想要创建 2 个不同的列，请像这样 col-md-4 + col-md-8 =12 列)这是我们在创建 Bootstrap 列时始终遵循的方法我希望你能明白我想说的话。 

<section id="boxes">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        hello
      </div>
      <div class="col-md-4">
        hello
      </div>
      <div class="col-md-4">
        hello
      </div>
    </div>
  </div>
</section>

关于html - 使用我可以应用于我的代码的 Bootstrap 制作列的最佳方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55171128/

25 4 0
文章推荐： javascript - 使用 native JavaScript，如果对象具有特定的 CSS 类，则更改对象的标题属性
文章推荐： python - 从 S3 下载透明背景文件
文章推荐： python - 如何在不破坏 pip freeze 的情况下链接到 distutils 中的 fork 包？
文章推荐： jquery - 在 HTML 表单输入范围上显示输出值 - 不起作用？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com