Question

我有以下HTML代码：

<div class="col-sm-4">
      <div class="form-group" class="form-inline">
        <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>

我想要实现的是选择表单及其标签在同一行。我尝试从stackoverflow的类似问题中应用解决方案。使用white-space: nowrap的跨度不起作用，class="form-inline"也不起作用或从此问题回答：Keep buttons and form with select dropdown on same row in Bootstrap 3我该如何解决？

Answer 1

你想要这个

＆＃13;

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

＆＃13;

Answer 2

这是一种方式：

Bootply ：http://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>

在bootstrap3中的同一行中选择表单及其标签

2 个答案: