Question

我附上了一张图片，上面列出了我希望以这种特殊方式列出的个人资料信息列表：http://i.stack.imgur.com/kALXa.jpg

此列表用于从数据库中获取数据，并将信息放在附加图像中标签的右侧。

我想过做一个定义列表，所以dt是标签而dd是来自数据库的信息，但是使用定义列表可能在语义上不正确吗？

我对这些信息应该是什么样子或应该采用什么样的方式感到难过？

我添加了一些代码，考虑了一个描述列表，但代码并没有真正正常工作：/并且定义列表可能不是可行的方法？

＆＃13;

<!DOCTYPE html>

<head>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-md-8 center-block">
        <dl class="dl-horizontal">
          <dt>heading</dt>
          <dd>
            <button class="btn btn-default"></button>
          </dd>

          <dt>another heading</dt>
          <dd>
            <button class="btn btn-default"></button>
          </dd>

          <dt>another heading</dt>
          <dd>
            <button class="btn btn-default"></button>
          </dd>

          <dt>another heading</dt>
          <dd>
            <button class="btn btn-default"></button>
          </dd>

          <dt>another heading</dt>
          <dd>
            <button class="btn btn-default"></button>
          </dd>
        </dl>
      </div>
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 1

只需使用自举网格系统即可。将服务器端代码放在适当的位置。

body{margin:10px;}
.profile{width:100%;height:auto;}
.name{font-size:40px;}
.row{margin-top:5px;}

<head>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</head>
<body>
  <div class="container">
    <div class="row">
      <div class="name">
        <span>First Name</span>
        <span> Last Name</span>
        <button class="btn btn-default pull-right">Button</button>
      </div>
      <div class="col-xs-4">

        <img src="http://images6.fanpop.com/image/photos/38400000/Stylish-Boy-emo-boys-38433361-1946-3107.jpg" class="imag-responsive profile" >
      </div>
      <div class="col-xs-8">
        <div class="row">
          <div class="col-xs-4"><label>heading</label></div>
          <div class="col-xs-8"><button class="btn btn-default">Button</button></div>
        </div>
        <div class="row">
          <div class="col-xs-4"><label>another heading</label></div>
          <div class="col-xs-8"><img src="http://listaka.com/wp-content/uploads/2015/07/baby-boy-wearing-hat.jpg" width=100px height=100px></div>
        </div>
        <div class="row">
          <div class="col-xs-4"><label>another heading</label></div>
          <div class="col-xs-8">decription of Heading</div>
        </div>
        <div class="row">
          <div class="col-xs-4"><label>another heading</label></div>
          <div class="col-xs-8">Date</div>
        </div>
        <div class="row">
          <div class="col-xs-4"><label>another heading</label></div>
          <div class="col-xs-8">175 cm</div>
        </div>
        <div class="row">
          <div class="col-xs-4"><label>another heading</label></div>
          <div class="col-xs-8">soccer,hockey,Baseball</div>
        </div>
        <div class="row">
          <div class="col-xs-4"><label>another heading</label></div>
          <div class="col-xs-8">Some another decription</div>
        </div>
      </div>
    </div>
  </div>
</body>

Answer 2

仔细阅读bootstrap文档。

http://getbootstrap.com/css/

你会得到解决方案：）

在bootstrap3中定义此配置文件信息的正确方法

2 个答案: