引导文本位于带圆圈图标旁边的文本

Question

我使用以下CSS和HTML代码来＆＃34;绘制＆＃34;围绕每个字体的圆圈 - 真棒＆amp; glyphicon icon（css adapeted from：here）：

.glyphicon-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid white;
  color: white;
  display: inline-table;
  text-align: center;
}

.glyphicon-ring .glyphicon-bordered {
  font-size: 20px;
  vertical-align: middle;
  display: table-cell;
}
.glyphicon-teal {
  background: teal;
  color: orange;
}

<div class="col-md-3">
 <div class="alert alert-info">
   <div class="glyphicon-ring glyphicon-teal">
        <span class="fa fa-lock glyphicon-bordered"></span>
   </div>
 </div>
</div>

现在我想将一些文字放在图像的右侧（除此之外），所以它看起来像这样：

Answer 1

＆＃13;

＆＃13;

.container{
  font-size:10px;
}

.glyphicon-ring {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 4px solid white;
  color: white;
  display: inline-table;
  text-align: center;
}

.glyphicon-ring .glyphicon-bordered {
  font-size: 15px;
  vertical-align: middle;
  display: table-cell;
}
.glyphicon-teal {
  background: teal;
  color: orange;
}


.margin_top{
	margin-top: 0px;
}

@media (max-width: 768px){
	.margin_top{
		margin-top: 10px !important;
	}
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
	
<div class="row">

<div class="col-md-offset-2 col-md-2 col-sm-3 col-xs-4">
 <div class="row alert alert-info" style="margin:0;padding:5px;">
   <div class="col-md-6 col-sm-6 col-xs-6">
		<div class="">
   			<div class="glyphicon-ring glyphicon-teal">
        		<span class="fa fa-lock glyphicon-bordered"></span>
   			</div>
   		</div>
	</div>

	<div class="col-md-6 col-sm-6 col-xs-6 text-center" style="padding:0;">
   	 <p style="padding-top: 10px;"> Here Some Text </p>
	</div>
</div>

</div>
<div class=" col-md-2 col-sm-3 col-xs-4">
 <div class="row alert alert-info" style="margin:0;padding:5px;">
   <div class="col-md-6 col-sm-6 col-xs-6">
		<div class="">
   			<div class="glyphicon-ring glyphicon-teal">
        		<span class="fa fa-lock glyphicon-bordered"></span>
   			</div>
   		</div>
	</div>

	<div class="col-md-6 col-sm-6 col-xs-6 text-center" style="padding:0;">
   	 <p style="padding-top: 10px;"> Here Some Text </p>
	</div>
</div>

</div>
<div class=" col-md-2 col-sm-3 col-xs-4	">
 <div class="row alert alert-info" style="margin:0;padding:5px;">
   <div class="col-md-6 col-sm-6 col-xs-6">
		<div class="">
   			<div class="glyphicon-ring glyphicon-teal">
        		<span class="fa fa-lock glyphicon-bordered"></span>
   			</div>
   		</div>
	</div>

	<div class="col-md-6 col-sm-6 col-xs-6 text-center" style="padding:0;">
   	 <p style="padding-top: 10px;"> Here Some Text </p>
	</div>
</div>

</div>
<div class=" col-md-2 col-sm-3 col-xs-4 margin_top">
 <div class="row alert alert-info" style="margin:0;padding:5px;">
   <div class="col-md-6 col-sm-6 col-xs-6">
		<div class="">
   			<div class="glyphicon-ring glyphicon-teal">
        		<span class="fa fa-lock glyphicon-bordered"></span>
   			</div>
   		</div>
	</div> 

	<div class="col-md-6 col-sm-6 col-xs-6 text-center" style="padding:0;">
   	 <p style="padding-top: 10px;"> Here Some Text </p>
	</div>
</div>

</div>



</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这和你想要的一样吗？

这是How to set up Spring Boot + Bitronix + non-XA Datasource + XA JMS Connection

希望这有帮助。

Answer 2

写下这样的东西：我认为下面的代码可以帮助你。

<div class="col-md-3">
<div class="col-md-6">
 <div class="alert alert-info">
   <div class="glyphicon-ring glyphicon-teal">
        <span class="fa fa-lock glyphicon-bordered"></span>
   </div>
 </div>
</div>
<div class="col-md-6">
 <div class="alert alert-info">
  ..................... Here Some text.............
 </div>
</div>
</div>

或者你可以写这样的

<div class="col-md-3">
<div class="display:inline-block">
<div class="alert alert-info">
   <div class="glyphicon-ring glyphicon-teal">
        <span class="fa fa-lock glyphicon-bordered"></span>
   </div>
 </div>
</div>
<div class="display:inline-block">
<div class="alert alert-info">
      ..................... Here Some text.............
     </div>
</div>
</div>

Answer 3

这很有效。

<div class="col-md-3">
 <div class="alert alert-info">
  <div class="glyphicon-ring glyphicon-teal">
    <span class="fa fa-lock glyphicon-bordered"></span>
  </div>
 <p style="display:inline;margin-left:10px;">Here some text</p>
 </div>
</div>

Answer 4

尝试类似这样的事情。

n-3

.glyphicon-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid white;
  color: white;
  display: inline-table;
  text-align: center;
}

.glyphicon-ring .glyphicon-bordered {
  font-size: 20px;
  vertical-align: middle;
  display: table-cell;
}
.glyphicon-teal {
  background: teal;
  color: orange;
}
.alert{
	position: relative;
}
.right-text {
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 38%;
}