1
我試圖對齊圖像右側的文本與無法在引導對齊圖像的右側文本
img {
float: left;
margin-right: 9px;
}
但它並不總是工作（上codepen似乎它的工作原理，但不是我的本地主機）
完整的源代碼與引導和AngularJs
https://codepen.io/anon/pen/YZGjgq
<!DOCTYPE htwml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head>
<title>Details Layout</title>
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-1.9.1.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style media="screen">
/* make sidebar nav vertical */
@media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
</style>
<style media="screen">
.hidden {
display: none;
}
</style>
<style>
/* start left side menu */
ul.menu-navigation {
font-size: 1.2em;
float: left;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
background: #e25454;
border-bottom: 1px solid #BF4E4E;
border-top: 1px solid #BF4E4E;
}
ul.menu-navigation li a {
display: block;
color: #fff;
text-decoration: none;
width: 205px;
padding: 10px 10px 10px 35px;
border-top: 1px solid #BF4E4E;
border-bottom: 1px solid #BF4E4E;
}
ul.menu-navigation li span {
display: none;
}
ul.menu-navigation li a:hover {
background-color: #BF4E4E;
border-top: 1px solid #BF4E4E;
}
ul.menu-navigation li a:hover span {
display: block;
font-size: 0.8em;
padding: 10px 0;
}
/* end left side menu */
</style>
<style>
img {
float: left;
margin-right: 9px;
}
</style>
<script>
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $window, $sce) {
$scope.sections = [
{id:'section1',name:'Section 1'},
{id:'section2',name:'Section 2'},
{id:'section3',name:'Section 3'},
{id:'section4',name:'Section 4'},
];
});
</script>
</head>
<body ng-app="app" ng-controller="MainCtrl" >
<div class="container">
<div class="row">
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Accueil</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
</div>
<div class="row">
<div class="col-sm-3">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="media">
<div class="media-left">
<img src="http://www.freeiconspng.com/uploads/person-icon-5.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">Mr DOE John</h4>
<a href="#">CEO <span class="glyphicon glyphicon-pencil"></span>
</a>
</div>
</div>
</a>
</h4>
</div>
<ul class="menu-navigation nav-tabs">
<li ng-repeat="section in sections">
<a href="#{{section.id}}" id="mnu{{section.id}}" class="mnu" data-toggle="tab" data-target="#{{section.id}}">{{section.name}}
<span>
Lorem Ipsum es texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el.
</span>
</a>
</li>
</ul>
<!-- End Left_Side_NavBar_Component_Html -->
</div>
<div class="col-sm-9 tab-content" >
<form class="form-group" action="index.html" method="post" id="sections">
<div id="myTabContent" class="tab-content"> <!-- start class .tab-content to create tab -->
<!-- start tab 1 -->
<div class="tab-pane in active" id="{{sections[0].id}}"> <!-- tab 1-->
{{sections[0].name}} content
</div>
<!-- end tab 1 -->
<div class="tab-pane " id="{{sections[1].id}}"><!-- tab 2 -->
{{sections[1].name}} content
</div>
<div class="tab-pane " id="{{sections[2].id}}"><!-- tab 3 -->
<!-- start tab 3 content -->
{{sections[2].name}} content
<!-- end tab 3 content -->
</div>
<div class="tab-pane " id="{{sections[3].id}}"> <!-- tab 4 -->
{{sections[3].name}} content
</div>
</div> <!-- end class .tab-content to create tab -->
</form>
</div>
</div>
</div>
</body>
</html>