个人中心
gpt4 book ai didi

html - Bootstrap 4 按钮对齐页面中间

转载 作者：行者123 更新时间：2023-11-28 02:50:52 27 4
gpt4 key购买 nike

enter image description here enter image description here我是 Bootstrap 4 的新手。我似乎无法让我的 3 个按钮位于页面中间。我正在使用 Bootstrap-4。我觉得这是我所缺少的简单东西。还有一种方法可以将按钮稍微扩展到文本之外，我会为此使用填充吗？谢谢!

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
    beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="Sanchez_Bootstrap_index.css">
    </style>
    <title>Sanchez</title>
  </head>
  <body>

    <!--NAVBAR-->
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
      <div class="container">
      <a class="navbar-brand" href="#">Sanchez</a>

    <!--Toggle Button-->
      <button class="navbar-toggler"
      data-toggle="collapse"
      data-target="#navbar"aria-controls="navbarTogglerDemo01" aria-
      expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span></button>

    <!--Navbar links-->
    <div class="collapse navbar-collapse" id="navbar">
    <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" a href="Sanchez_Bootstrap_about.html">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" 
     href="Sanchez_bootstrap_portfolio.html">Portfolio</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" 
     href="Sanchez_bootstrap_contact.html">Contact</a>
    </li>
    </ul>
    </div>
    </div>
   </nav>

   <div id="content">
   <div class="container text-center">
   <div class="row">
    <div class="col-lg-12">

      <a class="btn btn-dark btn-lg" a 
     href="Sanchez_Bootstrap_about.html">Web 
     Developer</a>
      <a class="btn btn-dark btn-lg" a 
      href="Sanchez_Bootstrap_portfolio.html">Portfolio</a>
      <a class="btn btn-dark btn-lg" a 
      href="Sanchez_Bootstrap_contact.html">Contact</a>
      </<div>
      </div>
    </div>
  </div>


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
    integrity="sha384-
    KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
    crossorigin="anonymous"></script>
    <script 


  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
    beta/js/bootstrap.min.js" integrity="sha384-
    h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" 
    crossorigin="anonymous"></script>
      </body>
    </html>

CSS body { 背景图片: url('images/background3.jpeg');

  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
  color: white;
}

@media only screen and (max-width: 767px) {
  body {
    background-image: url('images/background3.jpeg');
}

html{
  height: 100%;
}
#content{
  align-items: center;
  text-align: center;
}

最佳答案

请分享网页截图和问题以更好地解释它。另外，有几点我想提请注意。

  1. 当 bootstrap nav 依赖于 jquery.min.js 工作时，你为什么不在 head 中包含它？应该在bootstrap src之前
  2. 你打错了</<div>请检查您的代码
  3. 按钮居中是什么意思？

你的意思是并排居中？像这样:enter image description here或者你的意思是像堆叠一样居中？ enter image description here

对于前一种情况，我使用了这段代码:

<div id="content">
   <div class="container text-center" style = "vertical-align:middle;
     <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12" >
   <div class="row" style = "line-height: 20em;">     
    <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">
      <a class="btn btn-dark btn-lg" a 
     href="Sanchez_Bootstrap_about.html" >Web 
     Developer</a>
    </div>

    <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">
      <a class="btn btn-dark btn-lg" a 
      href="Sanchez_Bootstrap_portfolio.html" >Portfolio</a>
    </div>

    <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">     
      <a class="btn btn-dark btn-lg" a 
      href="Sanchez_Bootstrap_contact.html" >Contact</a>     
    </div>

      </div>
    </div>
    </div>
</div>

对于后者，我使用了:

<div id="content">
   <div class="container text-center">
    <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
     <div class="row">    
    <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
      <a class="btn btn-dark btn-lg" a 
     href="Sanchez_Bootstrap_about.html" >Web 
     Developer</a>
    </div>

    <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
      <a class="btn btn-dark btn-lg" a 
      href="Sanchez_Bootstrap_portfolio.html" >Portfolio</a>
    </div>

    <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">    
      <a class="btn btn-dark btn-lg" a 
      href="Sanchez_Bootstrap_contact.html" >Contact</a>     
    </div>

      </div>

    </div>
    </div>
  </div>
  1. 对于 bootstrap div，考虑将 div 划分为子 div，然后为它们提供元素。对于 col-lg-12，我们有 12 个 block 。如果你想要三个内部元素，将 12 除以 3 即 4。因此将三个元素中的每一个都包装在 col-lg-4 中。宽度为:100/3 = 33.33% 同样，如果您想要三个元素，每个元素的宽度为 100%，请将这三个元素包装在每个 col-lg-12 div 中，每个元素的宽度为 100/1 = 100%
  2. 最好在自己编写代码时养成指定 lg、sm、xs 和 md 的习惯，并使用移动优先开发方法来立即考虑它在每个移动设备上的外观。即在每个 div 中指定 col-lg-12 col-sm-12 col-xs-12 col-md-12。

注意:我在一个正在进行的元素中使用了你的代码，所以很少有 css 从我的代码中继承，比如字体宽度、按钮颜色、背景等

关于html - Bootstrap 4 按钮对齐页面中间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46674471/

27 4 0
文章推荐： javascript - 编码/解码翻译的句子
文章推荐： c++ - 网络爬虫在 read() 中下载网页的 recv 缓冲区应该有多大？
文章推荐： javascript - 隐藏和替换 html 内容和数据属性值
文章推荐： javascript - 使用 XUL 和 Javascript 的 OnSelect 处理程序
行者123
个人简介

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

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