css - 更改 Bootstrap 位置/填充没有任何效果

Question

我是 Bootstrap/CSS 的新手，我想知道为什么 Bootstrap 类的每个更改都只能靠运气。这种事经常发生在我身上，所以任何提示都很棒。

例子:

无法在左侧显示下拉菜单，在中心显示一些文本 - 在同一行。

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel panel-info">
       <div class="dropdown" style="align-content: center">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                    <span class="caret"></span></button>
            </div>
            <div class="text-left">Contacts</div>
</div>

Answer 1

.center {
     float: none;
     margin-left: 500px;
	 display: inline-block;
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel panel-info">
       <div class="dropdown" style="align-content: center">
					
					<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                    <span class="caret"></span></button> <h1 class="span7 center"> Contacts </h1>
</div>
</div>

<div class="panel panel-info">
   <div class="dropdown" style="align-content: center">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                <span class="caret align-left"></span>Contacts</button>
        </div>

你是这样问的吗？上面的代码在执行时将结果作为一个按钮给出，该按钮在左侧有下拉菜单和一些文本。请检查并回复。