html - Bootstrap 模型在关闭时搞乱了格式

Question

网站:http://zarwanhashem.com/index2

我不擅长 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 -->

如果您需要任何其他代码，请告诉我(我不确定需要什么)。您也可以从网站上访问它。不要去/index，去/index2。

Answer 1

我认为您只是显示了一个边框，因为图像是一个链接。

尝试将“outline: none”添加到图像周围的 anchor 标记的 CSS。

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