Question

我对HTML和CSS不太满意。我正在为我的个人网站使用网站模板，并且当您单击“项目”部分中的第一个项目时，我个人添加了一个模型。

当你关闭模特时，这个蓝色轮廓出现在图像周围，我不知道如何摆脱它：http://gyazo.com/c0aaa44f903069cb456041ed883d4ab8.png 当我打开/最大化另一个应用程序时轮廓消失，但一旦我最小化它就会回来。

项目部分：

<!-- Portfolio Section -->
<section id="portfolio" class="cbp-so-section cbp-so-init">
    <div class="container cbp-so-side cbp-so-side-top">
        <h1>My Projects</h1>

        <ul id="portfolio-grid" class="row portfolio-row">
            <li class="portfolio-mix col-md-4 ui-design">
                <figure class="portfolio-item">
                    <a href="#" data-toggle="modal"  data-target="#myModal">
                        <img class="img-responsive" src="assets/AIrobot.jpg" alt="">
                        <div class="caption-bg"></div>
                        <h3>AI Fighter Robot - Java</h3>
                        <p class="portfolio-item-description">This object oriented robot fought            robots created by other students in a third party environment.
                                                              Multiple robots were created in order to test various...</p>
                    </a>
                </figure>
            </li>
            <li class="portfolio-mix col-md-4 web-design">
                <figure class="portfolio-item">
                    <a href="#">
                        <img class="img-responsive" src="assets/spaceInvaders.jpg" alt="">
                        <div class="caption-bg"></div>
                        <h3>Space Invaders - Python</h3>
                        <p class="portfolio-item-description">An alien shooting game inspired by Tomohiro Nishikado's arcade game of the same name. 
                        The game includes multiple levels with different types of enemies and...</p>
                    </a>
                </figure>
            </li>
            <li class="portfolio-mix col-md-4 add-ons">
                <figure class="portfolio-item">
                    <a href="#">
                        <img class="img-responsive" src="assets/snake.jpg" alt="">
                        <div class="caption-bg"></div>
                        <h3>Snake - Turing</h3>
                        <p class="portfolio-item-description">Based on the classic arcade game of the same name, Snake
                        includes multiple difficulty levels, secret cheat codes, and... </p>
                    </a>
                </figure>
            </li>
        </ul>
    </div>
    <!-- Modal -->
            <div style="padding-top:80px" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">AI Fighter Robot</h4>
                  </div>
                  <div class="modal-body">
                    An object oriented robot programmed in Java. It fought robots created by other students in an environment 
                    created by a third party. I also created other robots with different strategies and tested them against each 
                    other to determine the best approach. The robot included an offensive and defensive mode, and would switch 
                    between the two depending on the outcome of various calculations. Within each mode there were multiple levels 
                    of calculations to determine the best course of action for the robot to take.
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
</section>
<!-- End of Portfolio Section -->

如果您需要其他任何代码，请告诉我（我不确定需要什么）。您也可以从网站上访问它。不要去/索引，转到/ index2。

Answer 1

我认为你只是出现了一个边框，因为图像是一个链接。

尝试将'outline：none'添加到CSS中，用于围绕图像的锚标记。

请参阅http://css-tricks.com/snippets/css/remove-dotted-link-borders/

Bootstrap模式在关闭时弄乱格式化

1 个答案: