Question

我是网络编程的新手（一晚学习PHP和一些css的小经验）。我的问题是使用Bootstrap的自定义内容列表组，我得到这个结果： enter image description here

使用此代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bs-example" data-example-id="list-group-custom-content">
    <div class="list-group">
      <a href="#" class="list-group-item">
        <h4 id="list-group-item-heading" class="list-group-item-heading">List group item heading</h4>
        <a class="anchorjs-link" href="#list-group-item-heading">
        	<span class="anchorjs-icon"></span></a>
        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
      </a>
      <a href="#" class="list-group-item">
        <h4 id="list-group-item-heading" class="list-group-item-heading">List group item heading<a class="anchorjs-link" href="#list-group-item-heading"><span class="anchorjs-icon"></span></a></h4>
        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
      </a>
      <a href="#" class="list-group-item">
        <h4 id="list-group-item-heading" class="list-group-item-heading">List group item heading<a class="anchorjs-link" href="#list-group-item-heading"><span class="anchorjs-icon"></span></a></h4>
        <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
      </a>
    </div>
</div>

我从Bootstrap官方页面抓取（通过按下rigth click，Inspect element，并抢夺html代码） http://getbootstrap.com/components/#list-group

as you can see, is pretty different

你可以看到，它是完全不同的。如何让我的页面像bootstrap样本？我需要做些什么改变才能让它看起来相似？

我使用此代码将容器添加到我的'Index.php'页面。

<body>
        <?php include('templates/nav-bar.php') ?>
        <?php include(D_SITES.find_reference($dbc,$pageid))?>
        <?php include('templates/footer.php') ?>
</body>

中间指令搜索数据库中对php文件的引用，该文件包含上面的代码。我使用CDN

添加bootstrap框架

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Answer 1

试试这个：

<div class="container">
  <div class="list-group">
    <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">Mr Gus</h4>
      <p class="list-group-item-text">I don't think we're alike at all, Mr. White. You're not a cautious man at all. Your partner was late. And he was high.</p>
    </a>
  </div>
  <div class="list-group">
    <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">Mr Gus</h4>
      <p class="list-group-item-text">I don't think we're alike at all, Mr. White. You're not a cautious man at all. Your partner was late. And he was high.</p>
    </a>
  </div>
  <div class="list-group">
    <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">Mr Gus</h4>
      <p class="list-group-item-text">I don't think we're alike at all, Mr. White. You're not a cautious man at all. Your partner was late. And he was high.</p>
    </a>
  </div>
</div>

请参阅：https://jsfiddle.net/c396r41j/

Answer 2

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <div class="container">
      <div class="list-group">
        <a href="#" class="list-group-item active">
          <h4 class="list-group-item-heading">Mr Gus</h4>
          <p class="list-group-item-text">I don't think we're alike at all, Mr. White. You're not a cautious man at all. Your partner was late. And he was high.</p>
        </a>
      </div>
      <div class="list-group">
        <a href="#" class="list-group-item active">
          <h4 class="list-group-item-heading">Mr Gus</h4>
          <p class="list-group-item-text">I don't think we're alike at all, Mr. White. You're not a cautious man at all. Your partner was late. And he was high.</p>
        </a>
      </div>
      <div class="list-group">
        <a href="#" class="list-group-item active">
          <h4 class="list-group-item-heading">Mr Gus</h4>
          <p class="list-group-item-text">I don't think we're alike at all, Mr. White. You're not a cautious man at all. Your partner was late. And he was high.</p>
        </a>
      </div>
    </div>

来自Bootstrap的list-group-custom问题

2 个答案: