Question

我尝试将图像右侧的文字与

对齐

        img {
            float: left;
            margin-right: 9px;
        }

但它并不总是有效（在codepen上似乎有效，但在我的localhost上却没有）

Bootstrap和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&nbsp;<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>

Answer 1

覆盖.media-left css类，在其中添加float:left。

.media-left{
   float:left
}

无法在引导程序中对齐图像右侧的文本

1 个答案: