Question

当在旋转木马中有一个图像时，底部的导航显示：

但是当向代码中添加第二个图像时，导航会消失，第二个图像会添加到第一个图像的底部：

这是我当前的代码，添加了第二张图片：

<div id="myCarousel" class="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="img/colette.png" alt="Beach" class="img-responsive">
        </div>
        <!-- When adding this, nav hides and new img is shown on bottom-->
        <div class="item">
            <img src="img/apple.png" alt="apple" class="img-responsive">
        </div>
    </div>
</div>

Answer 1

<?php

header('Content-Type: text/html; charset=utf-8');

echo "##############################\n";
echo "##        SSH SCRIPT        ##\n";
echo "##############################\n";
$result = getGroups(); 
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo $row['group_id'].") ".$row['name']."\n";
    }
echo "Select:";
} else {
    echo "No groups";
}


$groupID=trim(fgets(STDIN));    

$result = getHosts($groupID);   
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo $row['host_id'].") ".$row['hostname']."\n";
    }
echo "Select:";
} else {
    echo "0";
}

$hostID=trim(fgets(STDIN));    
$result = getAddress($hostID);      
ssh($result);    

#### Functions ####
function getAddress($hostID) {
    require("db.php");
    $sql = "SELECT address FROM hosts WHERE host_id=".$hostID."";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        return $row['address'];      
    }
}

function getHosts($groupID) {
    require("db.php");
    $sql = "SELECT * FROM hosts WHERE group_id=".$groupID."";
    $result = $conn->query($sql);
    return $result;
}

function getGroups() {
    require("db.php");
    $sql = "SELECT * FROM groups";
    $result = $conn->query($sql);
    return $result;
}

function ssh($ip) {
    shell_exec('ssh root@'.$ip.'');
}

?>

Answer 2

检查fiddle

上的工作演示

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
<ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/450x350" alt="Slide 1">
      <div class="carousel-caption">
        Caption Slide 1
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/450x350" alt="Slide 2">
      <div class="carousel-caption">
        Caption Slide 2
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/450x350" alt="Slide 3">
      <div class="carousel-caption">
        Caption Slide 3
      </div>
    </div>        
  </div>

</div>

添加图像时，Bootstrap Carousel导航会消失

2 个答案: