Question

以下代码在垂直方向显示label和button，我想显示内联。第一个div是必要且重要的。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class=" col-sm-9 col-sm-offset-3 col-md-2 col-md-offset-2 main">
  <h3><span class="label label-success">Productos</span></h3>
  <div class="dropdown">
    <button class="btn btn-success" type="button">Sleccione
                                <span class="caret"></span>
                            </button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">Java</a></li>
    </ul>
  </div>
</div>

＆＃13;

Answer 1

您可以添加以下样式代码：

<style>
    .label-success{
         float:left;
    }
</style>

Answer 2

将col-md-2更改为col-md-4。如果您不更改col-md-2，则在调整浏览器大小时，元素将再次垂直显示。

和

将此代码添加到Css：

.dropdown {
   display: inline-block;
}
h3 {
   display: inline-block;
}

完整代码：

.dropdown {
   display: inline-block;
}
h3{
   display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class=" col-sm-9 col-sm-offset-3 col-md-4 col-md-offset-2 main">
  <h3><span class = "label label-success">Productos</span></h3>
    <div class="dropdown">
      <button class="btn btn-success" type="button">Sleccione
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Java</a></li>
        </ul>
    </div>
</div>

bootstrap 3显示标签和btn内联

2 个答案: