引導4個按鈕對齊 - 頁面中間

我對Bootstrap 4很新。我似乎無法讓我的3個按鈕居中在頁面中間。我正在使用Bootstrap-4。我覺得這是簡單的我錯過了。還有一種方法可以將按鈕擴展到文本之外，我會使用填充嗎？謝謝！引導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 體{ 背景圖像：網址（ '圖像/ 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; 
}

來源

2017-10-10 Alexandra

請分享一下網頁的截圖和問題來解釋一下更好。此外，我想提請注意的幾點。

爲什麼當引導程序導航依賴它來工作時，你不在頭上包含jquery.min.js？它應該在引導之前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>

對於自舉的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已經繼承了形成我的代碼，如字體寬度，按鍵顏色，背景等

來源

2017-10-10 20:35:18

您好，我都嘗試規範和既不工作。我試圖在網頁中間並排放置按鈕。我附上了一張照片，它被刪除了。 :(我會嘗試重新連接，我把Jquery的src文件放在最下面，因爲我被教會把它放在頁面的最底部，然後放在關閉的body標籤之前。 – Alexandra

我使用了代碼，並對它們進行了截圖。上傳一個你得到的結果的圖像，你可以在主體中，等待DOM加載，但是我總是在啓動src之前使用jquery src，以確保它的可用性。 –

我做了html文檔，CSS需要以改變所有？我附上的圖像在我的代碼得到的頂部 – Alexandra

引導4個按鈕對齊 - 頁面中間

回答

相關問題