2016-07-19 3 views
2

の同じ行でそのラベルは、私は、次のHTMLコードを持っています。私は、stackoverflowから同様の質問からソリューションを適用しようとしました。 white-space: nowrapのスパンは機能しません。どちらもclass="form-inline"か、この質問の回答はありません:Keep buttons and form with select dropdown on same row in Bootstrap 3どうすれば解決できますか?ここで選択フォームとbootstrap3

答えて

6

が一つの方法です:

Bootplyhttp://www.bootply.com/YzaMGyRq99

CSS

select.form-control{display:inline-block}

HTML

<div class="col-sm-4"> 
     <div class="form-group"> 
     <span style="white-space: nowrap"> 
      <label for="size">Board size:</label> 
      <select class="form-control" id="size" style="background-color: black; color: silver"> 
      <option>small</option> 
      <option>medium</option> 
      <option>large</option> 
      <option>huge</option> 
      </select> 
     </span> 
     </div> 
    </div> 
3

あなたは、これは正しい方法で、受け入れ答えなければなりません。この

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
    
 
<form class="form-inline"> 
 
    <div class="form-group"> 
 
    <label for="size">Board size:</label> 
 
    <select class="form-control" id="size" style="background-color: black; color: silver"> 
 
      <option>small</option> 
 
      <option>medium</option> 
 
      <option>large</option> 
 
      <option>huge</option> 
 
      </select> 
 
    </div> 
 

 
</form> 
 
    
 
</body> 
 
</html>

+0

をしたいです。 –