对齐所有面板元素左 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:mail@mail.com">email@here.com</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:mail@mail.com">email@here.com</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:mail@mail.com">email@here.com</a></p></li></ul>
                <hr>
            </div>

Answer 1

您使用 Bootstrap Twitter，因此您可以将它们写入 indise div(col-md-12) 并在其中写入 2 div(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:mail@mail.com">email@here.com</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:mail@mail.com">email@here.com</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:mail@mail.com">email@here.com</a></p></li></ul>
                      </div>
                    </div>
                <hr>
            </div>