文章/答案/技术大牛

发布

问在html站点中添加3列
EN

Stack Overflow用户

提问于 2020-10-11 19:29:50

回答 2查看 58关注 0票数 0

我在这里建的这个网站。但这看起来很奇怪，因为他们是一个很大的空白。我怎样才能提出一篇文章，使它成为他们身边的所有人。网站链接：https://acanhs.org/nhs-articles.html我的html：

<!DOCTYPE html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
    <meta charset="utf-8">
    <title>ACA NHS</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="shortcut icon" href="favico/favicon.ico">
    <link rel="icon" sizes="16x16 32x32 64x64" href="favico/favicon.ico">
    <link rel="icon" type="image/png" sizes="196x196" href="favico/favicon-192.png">
    <link rel="icon" type="image/png" sizes="160x160" href="favico/favicon-160.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favico/favicon-96.png">
    <link rel="icon" type="image/png" sizes="64x64" href="favico/favicon-64.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favico/favicon-32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favico/favicon-16.png">
    <link rel="apple-touch-icon" href="favico/favicon-57.png">
    <link rel="apple-touch-icon" sizes="114x114" href="favico/favicon-114.png">
    <link rel="apple-touch-icon" sizes="72x72" href="favico/favicon-72.png">
    <link rel="apple-touch-icon" sizes="144x144" href="favico/favicon-144.png">
    <link rel="apple-touch-icon" sizes="60x60" href="favico/favicon-60.png">
    <link rel="apple-touch-icon" sizes="120x120" href="favico/favicon-120.png">
    <link rel="apple-touch-icon" sizes="76x76" href="favico/favicon-76.png">
    <link rel="apple-touch-icon" sizes="152x152" href="favico/favicon-152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="favico/favicon-180.png">
    <meta name="msapplication-TileColor" content="#FFFFFF">
    <meta name="msapplication-TileImage" content="favico/favicon-144.png">
    <meta name="msapplication-config" content="favico/browserconfig.xml">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

    <title>Stand Blog Posts</title>
    
    <link href="bootstrap.min.css" rel="stylesheet">
    
    <style>
a:link {
  color: Black;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: Black;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: Black;
  background-color: transparent;
    text-decoration: none;
}
a:active {
  color: Black;
  background-color: transparent;
    text-decoration: none;
}
</style>
    <style>


.btn {
  width: 150px;
  height: 150px;
  background: #ddd;
  position: relative;
  text-align: center;
  margin: 15px;
  overflow: hidden;
  border-radius: 100%;
  display: inline-block;
}
.btn.download {
  background: #00CCFF;
}
.btn.download .cloud {
  box-shadow: 0px 0px #00a3cc, 1px 1px #00a3cc, 2px 2px #00a3cc, 3px 3px #00a3cc, 4px 4px #00a3cc, 5px 5px #00a3cc, 6px 6px #00a3cc, 7px 7px #00a3cc, 8px 8px #00a3cc, 9px 9px #00a3cc, 10px 10px #00a3cc, 11px 11px #00a3cc, 12px 12px #00a3cc, 13px 13px #00a3cc, 14px 14px #00a3cc, 15px 15px #00a3cc, 16px 16px #00a3cc, 17px 17px #00a3cc, 18px 18px #00a3cc, 19px 19px #00a3cc, 20px 20px #00a3cc, 21px 21px #00a3cc, 22px 22px #00a3cc, 23px 23px #00a3cc, 24px 24px #00a3cc, 25px 25px #00a3cc, 26px 26px #00a3cc, 27px 27px #00a3cc, 28px 28px #00a3cc, 29px 29px #00a3cc, 30px 30px #00a3cc, 31px 31px #00a3cc, 32px 32px #00a3cc, 33px 33px #00a3cc, 34px 34px #00a3cc, 35px 35px #00a3cc, 36px 36px #00a3cc, 37px 37px #00a3cc, 38px 38px #00a3cc, 39px 39px #00a3cc, 40px 40px #00a3cc, 41px 41px #00a3cc, 42px 42px #00a3cc, 43px 43px #00a3cc, 44px 44px #00a3cc, 45px 45px #00a3cc, 46px 46px #00a3cc, 47px 47px #00a3cc, 48px 48px #00a3cc, 49px 49px #00a3cc, 50px 50px #00a3cc;
}
.btn.download .arrow {
  -webkit-animation: download 1s linear infinite;
  animation: download 1s linear infinite;
}
.btn.upload {
  background: #F49845;
}
.btn.upload .cloud {
  box-shadow: 0px 0px #f17d15, 1px 1px #f17d15, 2px 2px #f17d15, 3px 3px #f17d15, 4px 4px #f17d15, 5px 5px #f17d15, 6px 6px #f17d15, 7px 7px #f17d15, 8px 8px #f17d15, 9px 9px #f17d15, 10px 10px #f17d15, 11px 11px #f17d15, 12px 12px #f17d15, 13px 13px #f17d15, 14px 14px #f17d15, 15px 15px #f17d15, 16px 16px #f17d15, 17px 17px #f17d15, 18px 18px #f17d15, 19px 19px #f17d15, 20px 20px #f17d15, 21px 21px #f17d15, 22px 22px #f17d15, 23px 23px #f17d15, 24px 24px #f17d15, 25px 25px #f17d15, 26px 26px #f17d15, 27px 27px #f17d15, 28px 28px #f17d15, 29px 29px #f17d15, 30px 30px #f17d15, 31px 31px #f17d15, 32px 32px #f17d15, 33px 33px #f17d15, 34px 34px #f17d15, 35px 35px #f17d15, 36px 36px #f17d15, 37px 37px #f17d15, 38px 38px #f17d15, 39px 39px #f17d15, 40px 40px #f17d15, 41px 41px #f17d15, 42px 42px #f17d15, 43px 43px #f17d15, 44px 44px #f17d15, 45px 45px #f17d15, 46px 46px #f17d15, 47px 47px #f17d15, 48px 48px #f17d15, 49px 49px #f17d15, 50px 50px #f17d15;
}
.btn.upload .arrow {
  -webkit-animation: uplaod 1s linear infinite;
  animation: uplaod 1s linear infinite;
}
.btn.upload .arrow:after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent #97CA03 transparent;
}

.cloud {
  width: 100px;
  height: 40px;
  position: relative;
  background: #fff;
  display: inline-block;
  border-radius: 50px;
  margin: 60px auto 0;
  box-shadow: 0px 0px #00a3cc, 1px 1px #00a3cc, 2px 2px #00a3cc, 3px 3px #00a3cc, 4px 4px #00a3cc, 5px 5px #00a3cc, 6px 6px #00a3cc, 7px 7px #00a3cc, 8px 8px #00a3cc, 9px 9px #00a3cc, 10px 10px #00a3cc, 11px 11px #00a3cc, 12px 12px #00a3cc, 13px 13px #00a3cc, 14px 14px #00a3cc, 15px 15px #00a3cc, 16px 16px #00a3cc, 17px 17px #00a3cc, 18px 18px #00a3cc, 19px 19px #00a3cc, 20px 20px #00a3cc, 21px 21px #00a3cc, 22px 22px #00a3cc, 23px 23px #00a3cc, 24px 24px #00a3cc, 25px 25px #00a3cc, 26px 26px #00a3cc, 27px 27px #00a3cc, 28px 28px #00a3cc, 29px 29px #00a3cc, 30px 30px #00a3cc, 31px 31px #00a3cc, 32px 32px #00a3cc, 33px 33px #00a3cc, 34px 34px #00a3cc, 35px 35px #00a3cc, 36px 36px #00a3cc, 37px 37px #00a3cc, 38px 38px #00a3cc, 39px 39px #00a3cc, 40px 40px #00a3cc, 41px 41px #00a3cc, 42px 42px #00a3cc, 43px 43px #00a3cc, 44px 44px #00a3cc, 45px 45px #00a3cc, 46px 46px #00a3cc, 47px 47px #00a3cc, 48px 48px #00a3cc, 49px 49px #00a3cc, 50px 50px #00a3cc;
}
.cloud:after, .cloud:before {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  top: -20px;
  background: #fff;
  left: 5px;
}
.cloud:before {
  width: 40px;
  height: 40px;
  left: 50px;
}

.arrow {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
  top: 10px;
  width: 15px;
  height: 10px;
  background: #97CA03;
  display: inline-block;
}
.arrow:after {
  content: '';
  position: absolute;
  left: -8px;
  top: 100%;
  border: 15px solid transparent;
  border-top-color: #97CA03;
}
@-webkit-keyframes download {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }
}
@keyframes download {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }
}
@-webkit-keyframes uplaod {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0;
  }
}
@keyframes uplaod {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0;
  }
}


    </style>


    <link rel="stylesheet" href="assets/css/templatemo-stand-blog.css">
  </head>
    
  <body>
    
    <img src="logo.png" width="100" height="100" alt="HTML tag">
    <p class="bluebackground">&emsp;</p>
    <nav>
        <ul class="nav">
          <li><a class="active" href="index.html">Home</a></li>
          <li><a class="active" href="boyshome.html">Boys Campus</a></li>
          <li><a class="active" href="girlshome.html">Girls Campus</a></li>
          <li><a class="active" href="calculator.html">GPA Calculator</a></li>
        </ul>
    </nav>
    <p class="bluebackground">&emsp;</p>
    <br>
    <h1 class="girls-message centermess"><center>NHS BOYS</center></h1>
    <nav>
    <p class="bluebackground">&emsp;</p>
        <ul class="nav">
          <li><a class="active" href="boyshome.html">Home</a></li>
          <li><a class="active" href="nhs-articles.html">NHS Articles</a></li>
          <li><a class="active" href="meet-our-officers-boys.html">Meet Our Officers</a></li>
          <li><a class="active" href="boyscontact.html">Contact Us</a></li>
        </ul>
    </nav>
    <p class="bluebackground">&emsp;</p>
    <br>


    
    <center>
    <section class="blog-posts grid-system">
      <div class="container">
        <div class="row">
          <div class="col-lg-8">
            <div class="all-blog-posts">
            <center>
              <div class="row">
                <div class="col-lg-6">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="assets/images/blog-thumb-01.jpg" alt="">
                    </div>
                    <div class="down-content">
                      <h4>التعلم عبادة</h4>
                      <ul class="post-info">
                        <li>Omar Sheir</li>
                        <li>23/9/2020</li>
                      </ul>
                    <div class="btn download">
                        <div class="cloud">
                        <div class="arrow"></div>
                        </div>
                    </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="assets/images/blog-thumb-02.jpg" alt="">
                    </div>
                    <div class="down-content">
                      <h4>Uyghur Muslims</h4>
                      <ul class="post-info">
                        <li>Khalid Kooheji</li>
                        <li>27/9/2020</li>
                      </ul>
                      <div class="btn download">
                        <div class="cloud">
                        <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="assets/images/blog-thumb-02.jpg" alt="">
                    </div>
                    <div class="down-content">
                    <h4>الأمير الراحل … أمير الإنسانية</h4>
                      <ul class="post-info">
                        <li>Mohammad Al-Obaidi</li>
                        <li>3/10/2020</li>
                      </ul>
                      <div class="btn download">
                        <div class="cloud">
                        <div class="arrow"></div>
                        </div>
                    </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="assets/images/blog-thumb-03.jpg" alt="">
                    </div>
                    <div class="down-content">
                      <h4>الصدقة</h4>
                      <ul class="post-info">
                        <li>Ahmad Al-Mazrouei</li>
                        <li>20/9/2020</li>
                      </ul>
                      <div class="btn download">
                        <div class="cloud">
                        <div class="arrow"></div>
                        </div>
                    </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="assets/images/blog-thumb-04.jpg" alt="">
                    </div>
                    <div class="down-content">
                      <h4>Corona Virus: A New World</h4>
                      <ul class="post-info">
                        <li>Majed Al-Shaheen</li>
                        <li>27/9/2020</li>
                      </ul>
                      <div class="btn download">
                        <div class="cloud">
                        <div class="arrow"></div>
                        </div>
                    </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="assets/images/blog-thumb-05.jpg" alt="">
                    </div>
                    <div class="down-content">
                      <h4>Donec tincidunt leo</h4>
                      <ul class="post-info">
                        <li>Admin</li>
                        <li>May 12, 2020</li>
                      </ul>
                      <div class="btn download">
                        <div class="cloud">
                        <div class="arrow"></div>
                        </div>
                    </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="assets/images/blog-thumb-06.jpg" alt="">
                    </div>
                    <div class="down-content">
                      <h4>Mauris ac dolor ornare</h4>
                      <ul class="post-info">
                        <li>Admin</li>
                        <li>May 10, 2020</li>
                      </ul>
                      <div class="btn download">
                        <div class="cloud">
                        <div class="arrow"></div>
                        </div>
                    </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              </center>
            </div>
          </div>
        </div>
      </div>
    </section>
    </center>

    <footer class="footer-distributed">
        <div class="footer-left">
            <h3>NHS<span>ACA</span></h3>
            <p class="footer-links">Boys Campus:</p>
            <p class="footer-links">
            <a href="https://www.instagram.com/nhsb.aca/"><i class="fa fa-instagram"></i>
                 nhsb.aca</a>&emsp;
                 |&emsp;
                 <a href="mailto:nhsb.aca@gmail.com"><i class="fa fa-envelope"></i>
                nhsb.aca@gmail.com</a>
            </p>
            <p class="footer-links">Girls Campus:</p>
            <p class="footer-links">
                <a href="https://www.instagram.com/aca.nhs/"><i class="fa fa-instagram"></i>
                 aca.nhs</a>&emsp;
                  |&emsp;
                 <a href="mailto:acanational.hs@gmail.com"><i class="fa fa-envelope"></i>
                acanational.hs@gmail.com</a>
            </p>
            <br>
            <p class="footer-company-name">© Mohammad al Nusif</p>
        </div>
        <div class="footer-center">
        <br>
        <br>
        <br>
            <div>
                <a href="https://goo.gl/maps/B3vW2nPkNewZUyxW9"><i class="fa fa-map-marker"></i>
                <p>Boys Campus Map</p></a>
            </div>
            <div>
                <a href="https://goo.gl/maps/uKS7qgy5P6F8csRK7"><i class="fa fa-map-marker"></i>
                <p>Girls Campus Map</p></a>
            </div>
        </div>
        <div class="footer-right">
            <p class="footer-company-about">
                <br>
                <br>
                <br>
                <span>Boys Campus:</span>
                Advisor's Email - sali.alkhuraishi@aca.edu.kw<br>
                President's Email - bahaabed2003@gmail.com<br>
                Vice President's Email - azoibi17@gmail.com<br>
                <br>
                <span>Girls Campus:</span>
                Advisor's Email - nicole.depew@aca.edu.kw<br>
                President's Email - kayanalghanim@gmail.com<br>
                Vice President's Email - skkh03@gmail.com <br>
                <br>
            <div class="footer-icons">
            </div>
        </div>
    </footer>
  </body>
</html>

我只需要整理一下，让它在视觉上appealing....................................................................................

javascript

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-10-11 19:43:09

如果要添加3列，请使用col-lg-4而不是col-lg-6，因为它将您的列划分为2，其中col-lg-4将行划分为3列。

   <div class="container">
     <div class="row">
      <div class="col-lg-12">
      <div class="all-blog-posts">
       <center>

   
        <div class="col-lg-4">
          <div class="blog-post">
             Column 1 
            </div>

        <div class="col-lg-4">
          <div class="blog-post">
             Column 2
            </div>

        <div class="col-lg-4">
          <div class="blog-post">
             Column 3
            </div>

        </div>

票数 0

Stack Overflow用户

发布于 2020-10-11 19:36:04

当您使用引导程序时，这是因为您使用的是一个col-lg-8作为您所有页面内容的父级。

集装箱->行-> -lg-8

换乘一次或一次-12。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64308181

复制

相似问题

问在html站点中添加3列
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在html站点中添加3列EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在html站点中添加3列
EN