對齊元素（引導4）

-1

我不知道如何在一個單行顯示它那麼應該怎麼辦呢？我試着給內聯ID =「搜索」，但它沒有工作。對齊元素（引導4）

在此先感謝。

<div class="row"> 
 
     <div id="search"> 
 
     <div class="form-group"> 
 
     <input type="text" class="form-control" id="" placeholder="Search by skills/titles"> 
 
     </div> 
 
     <div class="dropdown"> 
 
     <button class="btn btn-grey dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
     Select Location 
 
     </button> 
 
     <div class="dropdown-menu" aria-labelledby="about-us"> 
 
     <a class="dropdown-item" href="#">Chennai</a> 
 
     <a class="dropdown-item" href="#">Bangalore</a> 
 
     <a class="dropdown-item" href="#">Mumbai</a> 
 
     <a class="dropdown-item" href="#">Delhi</a> 
 
     <a class="dropdown-item" href="#">Cochin</a> 
 
     <a class="dropdown-item" href="#">Hyderabad</a> 
 
     </div> 
 
     </div> 
 
     <button type="button" class="btn btn-outline-danger">Find Jobs</button> 
 
     </div> 
 
    </div>

來源

2017-03-11 prathana dan

你應該看看到引導網格系統，是非常有用的 https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
</head> 
 
<body> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <h1>Option 1 </h1> 
 
    <div class="row"> 
 
    <div class="col-md-12 col-xs-12"> 
 
     <div class="col-md-6 col-xs-6"> 
 
     <input type="text" class="form-control" id="test" placeholder="Search by skills/titles"> 
 
     </div> 
 
     <div class="col-md-3 col-xs-3"> 
 
     <div class="dropdown"> 
 
      <button class="btn btn-grey dropdown-toggle" type="button" id="test1" data-toggle="dropdown" 
 
        aria-haspopup="true" 
 
        aria-expanded="false"> 
 
      Select Location 
 
      </button> 
 
      <div class="dropdown-menu" aria-labelledby="about-us"> 
 
      <a class="dropdown-item" href="#">Chennai</a> 
 
      <a class="dropdown-item" href="#">Bangalore</a> 
 
      <a class="dropdown-item" href="#">Mumbai</a> 
 
      <a class="dropdown-item" href="#">Delhi</a> 
 
      <a class="dropdown-item" href="#">Cochin</a> 
 
      <a class="dropdown-item" href="#">Hyderabad</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-3 col-xs-3"> 
 
     <button type="button" class="btn btn-outline-danger">Find Jobs</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <h1>Option 2 </h1> 
 
    <div class="row"> 
 

 
    <form class="form-inline"> 
 
     <div class="form-group"> 
 

 
     <input type="text" class="form-control" id="" placeholder="Search by skills/titles"> 
 

 
     </div> 
 
     <div class="form-group"> 
 

 
     <div class="dropdown"> 
 
      <button class="btn btn-grey dropdown-toggle" type="button" id="" data-toggle="dropdown" 
 
        aria-haspopup="true" aria-expanded="false"> 
 
      Select Location 
 
      </button> 
 
      <div class="dropdown-menu" aria-labelledby="about-us"> 
 
      <a class="dropdown-item" href="#">Chennai</a> 
 
      <a class="dropdown-item" href="#">Bangalore</a> 
 
      <a class="dropdown-item" href="#">Mumbai</a> 
 
      <a class="dropdown-item" href="#">Delhi</a> 
 
      <a class="dropdown-item" href="#">Cochin</a> 
 
      <a class="dropdown-item" href="#">Hyderabad</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <button type="submit" class="btn btn-default">Find Jobs</button> 
 
     </div> 
 
    </form> 
 

 
    </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-03-11 19:04:07 Monicka

如果這回答你的問題，你能否接受答案？ – Monicka

是的，我希望所有的三個一起出現，它們之間有空格，該怎麼做？ @SimonaMi –

我編輯我的答案，也找到了一個很好的例子，做你所需要的：http://codepen.io/egerrard/pen/KaNxvW – Monicka

對齊元素（引導4）

回答

相關問題