将所有面板元素左对齐CSS和Bootstrap Twitter

Question

我试图将留在图像附近的面板元素（名称和电子邮件）对齐，但它不起作用，这会打乱我的另一个面板。这是Bootply 中的链接

这是我使用的代码：

<div class="col-md-9">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 style=";text-align:center;font-family: 'Ubuntu', sans-serif;font-weight:500;">PROFILE</h4>
            </div>
            <div class="panel-body">
                <h4 style="font-family: 'Ubuntu', sans-serif;font-weight:500;margin-bottom:-15px;text-align:center;">TEST</h4>
                <hr>
                    <img src="administrata/.jpg" class="thumbnail" style="height:100px; ">
                    <p style="">Name Surname</p>
                    <ul><li><p>E - mail: <a href="mailto:[e-mail]">[e-mail]</a></p></li></ul>
                <hr>
            </div>
            <div class="panel-body">
                <h4 style="font-family: 'Ubuntu', sans-serif;font-weight:500;margin-bottom:-15px;text-align:center;">TEST</h4>
                <hr>
                    <img src="administrata/.jpg" class="thumbnail" style="height:100px; ">
                    <p style="">Name Surname</p>
                    <ul><li><p>E - mail: <a href="mailto:[e-mail]">[e-mail]</a></p></li></ul>
                <hr>
            </div>
        </div>
    </div>

如果你需要任何解释，请告诉我。

编辑：

我试过这个代码，但没有帮助：

<div class="panel-body">
                <h4 style="font-family: 'Ubuntu', sans-serif;font-weight:500;margin-bottom:-15px;text-align:center;">TEST</h4>
                <hr>
              <img src="administrata/.jpg" class="thumbnail" style="height:100px;float:left ">
                    <p style="float:left">Name Surname</p>
              <ul style="float:left"><li><p>E - mail: <a href="mailto:[e-mail]">[e-mail]</a></p></li></ul>
                <hr>
            </div>

Answer 1

您使用Bootstrap Twitter，这样您就可以将它们写为独立的div（col-md-12），并在其中写2div（col-md-6）col-md-6或任何您想要的大小。

<hr>
     <div class="col-md-12">
        <div class="col-md-6"><img src="administrata/.jpg" class="thumbnail" style="height:100px;   "></div>
        <div class="col-md-6">
                <p style="">Name Surname</p>
                <ul><li><p>E - mail: <a href="mailto:[e-mail]">[e-mail]</a></p></li></ul>            </div>
              </div>
<hr>

Answer 2

您可以使用Bootstrap 的Media对象

<div class="media">
   <a class="pull-left" href="#">
   <img class="media-object" src="..." alt="...">
</a>
<div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
 </div>
</div>

然后是这样的：

<div class="panel-body">
                <h4 style="font-family: 'Ubuntu', sans-serif;font-weight:500;margin-bottom:-15px;text-align:center;">TEST</h4>
                <hr>
                    <div class="media">
                      <a class="pull-left" href="#">
                        <img src="administrata/.jpg" class="thumbnail" style="height:100px; ">
                      </a>
                      <div class="media-body">
                        <h4 class="media-heading">Name Surname</h4>
                        <ul><li><p>E - mail: <a href="mailto:[e-mail]">[e-mail]</a></p></li></ul>
                      </div>
                    </div>
                <hr>
            </div>
            <div class="panel-body">
                <h4 style="font-family: 'Ubuntu', sans-serif;font-weight:500;margin-bottom:-15px;text-align:center;">TEST</h4>
                <hr>
                    <div class="media">
                      <a class="pull-left" href="#">
                        <img src="administrata/.jpg" class="thumbnail" style="height:100px; ">
                      </a>
                      <div class="media-body">
                        <h4 class="media-heading">Name Surname</h4>
                        <ul><li><p>E - mail: <a href="mailto:[e-mail]">[e-mail]</a></p></li></ul>
                      </div>
                    </div>
                <hr>
            </div>