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>

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

2 个答案: