2016-11-25 36 views
0

我想創建一個簡單的Bootstrap頁面,每個頁面有一個側面按鈕。四個輸入字段水平排列並居中在屏幕上。錯誤的佈局和簡單的引導頁上的包裝

隨着我寫的代碼字段向右偏移(所以不居中),當屏幕縮小時,包裝看起來很糟糕。我的代碼如下所示:

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>WIA</title> 
 

 
    <!-- Bootstrap --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <style> 
 
     .wia-color { 
 
      color: #00DDDD; 
 
     } 
 

 
     .wia-navbar-logo { 
 
      margin-top: -6px; 
 
      max-height: 44px; 
 
      height: 44px; 
 
     } 
 

 
     .wia-top-section { 
 
      height: 800px; 
 
      background-color: transparent; 
 
     } 
 

 
     .wia-logo-strapline { 
 
      margin-top: 0px; 
 
      max-height: 123px; 
 
      height: 123px; 
 
     } 
 

 
     .wia-strapline-text { 
 
      color: white; 
 
      font-size: 40px !important; 
 
      font-family: Open Sans; 
 
      font-weight: 100; 
 
      font-style: normal; 
 
      margin-top: 38px; 
 
     } 
 

 
     .wia-filter-column { 
 
      width: 280px; 
 
     } 
 

 
     .wia-filter-row { 
 
      color: white; 
 
      margin-top: 50px; 
 
      font-size: 18px; 
 
      font-weight: 400; 
 
     } 
 

 
     .wia-filter-container { 
 
      width: 250px; 
 
      white-space: nowrap; 
 
      float:left; 
 
     } 
 
     .wia-filter-label { 
 
      color: white; 
 
      font-size: 18px; 
 
      font-weight: 200; 
 
      float: left; 
 
      padding-left: 10px; 
 
      margin-bottom: 4px; 
 
     } 
 

 
     .wia-filter-value { 
 
      value: 'xxx'; 
 
      width: 200px; 
 
      height: 30px; 
 
      background-color: #141414; 
 
      border-style: solid; 
 
      border-left-width: 3px; 
 
      border-left-color: #00DDDD; 
 
      border-top: none; 
 
      border-bottom: none; 
 
      border-right: none; 
 
      color: white; 
 
      font-size: 18px; 
 
      font-weight: 200; 
 
      padding-left: 4px; 
 
     } 
 

 
     .wia-filter-button { 
 
      width: 30px; 
 
      height: 30px; 
 
      background-color: #222626; 
 
      color: #00DDDD; 
 
      border: none; 
 
      vertical-align: top; 
 
      margin-left: -5px; 
 
      font-weight:100; 
 
     } 
 

 
     /* Remove the navbar's default margin-bottom and rounded borders */ 
 
     .navbar { 
 
      margin-bottom: 0; 
 
      border-radius: 0; 
 
     } 
 

 
     .navbar-inverse { 
 
      background-color: #222626; 
 
      height: 64px; 
 
      max-height: 64px; 
 
      min-height: 64px; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#"> 
 
      </a> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 

 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">Donate</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav> 
 

 
<div class="jumbotron wia-top-section"> 
 
    <div class="container-fluid"> 
 
     <div class="row wia-filter-row"> 
 
      <div class="col-sm-2"> 
 
      </div> 
 
      <div class="col-sm-2 wia-filter-column"> 
 
       <div class="wia-filter-label"> 
 
        What 
 
       </div> 
 
       <br/> 
 
       <div class="wia-filter-container"> 
 
        <input class="wia-filter-value" type="text" placeholder="One"> 
 
        <button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-2 wia-filter-label wia-filter-column"> 
 
       <div class="wia-filter-label"> 
 
        Where 
 
       </div> 
 
       <br/> 
 
       <div class="wia-filter-container"> 
 
        <input class="wia-filter-value" type="text" placeholder="Two"> 
 
        <button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-2 wia-filter-label wia-filter-column"> 
 
       <div class="wia-filter-label"> 
 
        When 
 
       </div> 
 
       <br/> 
 
       <div class="wia-filter-container"> 
 
        <input class="wia-filter-value" type="text" placeholder="Three"> 
 
        <button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-2 wia-filter-label wia-filter-column"> 
 
       <div class="wia-filter-label"> 
 
        Who 
 
       </div> 
 
       <br/> 
 
       <div class="wia-filter-container"> 
 
        <input class="wia-filter-value" type="text" placeholder="Four"> 
 
        <button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-2"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="container wia-filter-label text-center"> 
 
     SOME MORE STUFF 
 
    </div> 
 
</div> 
 

 

 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</body> 
 
</html>

我創建了一個plunker這裏:

https://plnkr.co/edit/V0KVM1J2xX1FRAiFYW16?p=preview

+0

您沒有正確使用引導網格。你爲什麼要把自己的寬度給網格? – Aslam

+0

我一開始嘗試不給寬度,但佈局更糟糕。 –

+0

查看我的回答 – Aslam

回答

1

這是我會怎麼做。使用引導網格佈局並添加我自己的類來更改顏色。 這應該有助於您理解並創建更好的網格。

在代碼中,我已經使用了bootstrap必須提供的所有內容以及第二個按鈕上的自定義類,以便您能夠理解。

檢查代碼在這裏:http://codepen.io/hunzaboy/pen/RogvQj

<div class="container" style="margin-top: 30px;"> 
    <div class="row"> 
    <div class="col-md-3"> 
     <div class="input-group"> 
     <input type="text" class="form-control" aria-label="..." placeholder="One"> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button> 
      <ul class="dropdown-menu dropdown-menu-right"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </div> 
     <!-- /btn-group --> 
     </div> 
     <!-- /input-group --> 
    </div> 
    <div class="col-md-3"> 
     <div class="input-group"> 
     <input type="text" class="form-control form-custom" aria-label="..." placeholder="Button with class"> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-default btn-custom dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button> 
      <ul class="dropdown-menu dropdown-menu-right"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </div> 
     <!-- /btn-group --> 
     </div> 
     <!-- /input-group --> 
    </div> 
    <div class="col-md-3"> 
     <div class="input-group"> 
     <input type="text" class="form-control" aria-label="..." placeholder="One"> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button> 
      <ul class="dropdown-menu dropdown-menu-right"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </div> 
     <!-- /btn-group --> 
     </div> 
     <!-- /input-group --> 
    </div> 
    <div class="col-md-3"> 
     <div class="input-group"> 
     <input type="text" class="form-control" aria-label="..." placeholder="One"> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button> 
      <ul class="dropdown-menu dropdown-menu-right"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </div> 
     <!-- /btn-group --> 
     </div> 
     <!-- /input-group --> 
    </div> 

    </div> 
    <!-- /.row --> 
</div> 
+0

謝謝。我無法將您的代碼移到我的按鈕樣式和我的標籤上方的輸入字段。輸入字段位於屏幕的左側,而不是居中。 –

+0

請檢查官方bootstrap網站的佈局和表單元素。它會幫助你很多。 – Aslam

+0

是的。 Bootstrap文檔非常好。我花了很多時間研究它,並沒有理解爲什麼我的代碼不工作,我在這裏尋求幫助。 –

2

的事情是在引導該列元素自然浮動,因此會盡量調整到一側(在這種情況下左)。

你可以嘗試設置CSS,就像這樣:

.wia-filter-row { 
text-align:center; 
} 
.wia-filter-row .col-sm-2{ 
float:none; 
display: inline-block; 
} 

所以,你可以有柱與適當的寬度和在一行中顯示。 順便說一句,你不需要空的div來強制間距。您可以使用col-sm-offset-2。

+0

感謝瑪麗娜,我嘗試過,但我仍然遇到同樣的問題。感謝col-sm-offest-2提示,我完全忘記了偏移量! –