Question

我正在为我的高中机器人团队制作一个网站，我对html和css完全不熟悉。为什么其中一个专栏（melanie aguilar one）不像其他专栏那样运作？

网站 - robotichive3774.com

<!DOCTYPE html>
<html>
<head>

<title>Robotics Team 3774 Home</title>

<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">


<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
<!-------------------- UNIFORM CODE ------------------------->
<!-- Navbar -->

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/Home">Team 3774</a>
        </div>
        <div class="navbar-collapse collapse" style="height: 0.866667px;">
            <ul class="nav navbar-nav">
                <li><a href="/Team Bio">Team Bio</a></li>
                <li><a href="/Our Robot">Our Robot</a></li>
                <li><a href="/Our Coach">Our Coach</a></li>
                <li><a href="/Gallery">Gallery</a></li>
                <li><a href="/Outreach">Outreach</a></li>
                <li><a href="/Youtube">Youtube</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- Banner -->
<div id="top-jumbotron" class="jumbotron">
    <img src="/Images/Banner.png" class="img-responsive" alt="Responsive image">
</div>
<!----------------------------------------------------------->


<div class="jumbotron">
    <h1>Team 3774 Member Bio</h1>
    <p>Here you can find links to every member with some information on each of them.</p>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-4">
        <div class="bubble">
            <h2>Abanoub Boules</h2>
            <p>Team Captain, Engineer, Coder</p>
            <a href="/Team Bio/Abanoub.html" type="button" class="btn btn-default">Read More</a>
        </div>
        </div>
        <div class="col-md-4">
        <div class="bubble">
            <h2>Andre Bernardo</h2>
            <p>Head Engineer, Assistant Captain</p>
            <a href="/Team Bio/Andre.html" type="button" class="btn btn-default">Read More</a>
        </div>
        </div>
        <div class="col-md-4">
        <div class="bubble">
            <h2>Leo Scarano</h2>
            <p>Head Coder, Head Web-master</p>
            <a href="/Team Bio/Leo.html" type="button" class="btn btn-default">Read More</a>
        </div>
        </div>
        <div class="col-md-4">
        <div class="bubble">
            <h2>Kristen Kaldas</h2>
            <p>Coder, Head Documenter</p>
            <a href="/Team Bio/Abanoub.html" type="button" class="btn btn-default">Read More</a>
        </div>
        </div>
        <div class="col-md-4">
        <div class="bubble">
            <h2>Anish Patel</h2>
            <p>Engineer, Head 3D Modelling</p>
            <a href="/Team Bio/Abanoub.html" type="button" class="btn btn-default">Read More</a>
        </div>
        </div>
        <div class="col-md-4">
        <div class="bubble">
            <h2>Andrew Wojtkowski</h2>
            <p>Coder, Web-master, Engineer</p>
            <a href="/Team Bio/Abanoub.html" type="button" class="btn btn-default">Read More</a>
        </div>
        </div>
        <div class="col-md-4">
        <div class="bubble">
            <h2>Furhan Ashraf</h2>
            <p>Financial Advisor, Engineer</p>
            <a href="/Team Bio/Abanoub.html" type="button" class="btn btn-default">Read More</a>
        </div>
        </div>
        <div class="col-md-4">
        <div class="bubble">
            <h2>Kenneth Rebbecke</h2>
            <p>Engineer, Documenter</p>
            <a href="/Team Bio/Abanoub.html" type="button" class="btn btn-default">Read More</a>
        </div>
        </div>
        <div class="col-md-4">
        <div class="bubble">
            <h2>Mina Hanna</h2>
            <p>Engineer, Coder</p>
            <a href="/Team Bio/Abanoub.html" type="button" class="btn btn-default">Read More</a>
        </div>
        <div class="col-md-4">
        <div class="bubble" id="special">
            <h2>Melanie Aguilar</h2>
            <p>Secretary, Mascot</p>
            <a href="/Team Bio/Abanoub.html" type="button" class="btn btn-default">Read More</a>
        </div>
        </div>
    </div>
</div>


</body>
</html>





#top-jumbotron
 {
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
    margin-bottom: 0;
}

body
{
background-color: #E8E8E8;
}

.bubble
{
background-color: #ffffff;
padding: 20px;
width: 95%;
height: 175px;
border-radius: 15px;
margin-top: 10px;
margin-bottom: 10px;
}

#special
{
float: left;
}

Answer 1

你只是错过了一个/ div - 我注意到div里面有一个div，记住你需要关闭它们。我使用Netbeans for html，它会告诉你是否有问题。如果你在Mac上，我被告知Komodo也非常好。一个好的编辑程序可以节省生命！

固定代码：

<div class="col-md-4">
        <div class="bubble">
            <h2>Mina Hanna</h2>
            <p>Engineer, Coder</p>
            <a href="/Team Bio/Abanoub.html" type="button" class="btn btn-default">Read More</a>
        </div>
</div> <!-- this one! -->

编辑代码有一些问题，迈克尔指出了一个 - 正如他所说，Bootstrap是一个网格。所以想象一下（我实际上通常画它）一个分为12列的盒子。对于每个行div，您应该只在其中添加最多12个列。你可以打破这个，它通常仍然有效，因为div只会溢出并向下移动，但这不是最好的做法。如果修复丢失的div结束标记不起作用，请尝试修复行结构，使其在页面上最多只添加12列

Answer 2

您可以拥有与您指定的布局类似的布局，但是它不一定适用于每个Bootstraps预期的功能，因此通常最好遵循他们推荐的行结构。

Bootstrap包括一个响应式移动第一流体网格系统，随着设备或视口大小的增加，可以适当地扩展到12列。

而不是

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  ...
</div>

你应该这样做，例如：

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>
  <div class="col-md-2"></div>

</div>

在一行中，每列定义中连字符后面的数字总和最多应为12。

为什么我的一个引导程序列没有正常运行？

2 个答案: