Question

我是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 身体{ background-image：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;
}

Answer 1

请分享网页的截图和问题，以便更好地解释它。此外，我想引起注意的几点。

当bootstrap nav依赖它工作时，为什么你不包括jquery.min.js？它应该在bootstrap src
您有错误</<div>请检查您的代码
按钮居中意味着什么？

你的意思是并排居中？像这样：或者你的意思是在堆叠中居中？

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

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

对于bootstrap div，考虑将div分成细分，然后给它们元素。对于col-lg-12，我们有12个街区。如果你想要三个内部元素，将12除以3，即4.将所有三个元素包装在col-lg-4中。宽度为：100/3 = 33.33％同样，如果你想要每个100％宽的三个元素，请在每个col-lg-12 div中包含三个元素，每个元素的宽度为100/1 = 100％
当您编写代码本身并使用移动优先开发方法来思考它将如何在每个移动设备上立即显示时，最好养成指定lg，sm，xs和md的习惯。即在每个div中指定col-lg-12 col-sm-12 col-xs-12 col-md-12。

注意：我在正在进行的项目中使用了您的代码，因此很少有css从我的代码继承，如字体宽度，按钮着色，背景等

Bootstrap 4按钮对齐 - 页面中间

1 个答案: