Question

很抱歉打扰但我有两个问题：

1）我现在正在设计这个样本网站。我有这个小问题。当我点击下拉列表按钮（Our Softwares）时，一切正常，但Color除外。当我点击下拉列表时，我需要将它的颜色更改为green，但它显示的颜色与white的颜色相似，而且我正在应用的主题看起来很笨拙网站。

以下是点击下拉列表的网站截图这是我正在使用的代码片段：

               <ul class="nav navbar-nav">
                    <li class="active"><a href="#" style="color:white;">Home<span class="sr-only">(current)</span></a></li>
                    <li><a href="#" style="color:white;" onMouseOver="this.style.color = '#37b725'"
                           onMouseOut="this.style.color = '#ffffff'">About Us</a></li>

                    <li class="dropdown" >
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="color:white;" >Our Softwares<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Software 1</a></li>
                            <li><a href="#">Software 2</a></li>
                            <li><a href="#">Software 3</a></li>

                        </ul>
                    </li>
                </ul>

我甚至检查了此按钮的active状态，但它不起作用：由于它属于toggle-dropdown类，我使用此css部分，但它不起作用：

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
    outline: 0;
    background-color:red;
}

.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
    color: #333;
    background-color: red;
    border-color: #8c8c8c;
}

这是第二个问题

2）我创建了这些缩略图，就像照片库一样排列。

以下是他们的截图：当我像horizontally或vertically那样安排它们时，它们/ site *下方有一个大空间。实际上，每次我水平/垂直插入缩略图时，网站都会垂直扩展。

我附上了截图：每次我添加缩略图时，它都会不断扩展，就像网站下面有一些东西一样。

以下是我用来对齐这些缩略图的代码：

<div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="photos/square.png" alt="Photo not found!">
                <div class="caption">
                    <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
                </div>
            </div>
        </div>
    </div>


    <div class="thumbnail" style="left:290px;top: -320px;">
        <img src="photos/square.png" alt="Photo not found!">
        <div class="caption">
            <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
        </div>
    </div>

    <div class="thumbnail" style="left: 560px;top: -640px;">
        <img src="photos/square.png" alt="Photo not found!">
        <div class="caption">
            <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail" style="position: relative;left:5px;top: -640px;">
                <img src="photos/square.png" alt="Photo not found!">
                <div class="caption">
                    <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
                </div>
            </div>
        </div>
    </div>

    <div class="thumbnail" style="position: relative;left:290.5px;top: -960px;">
        <img src="photos/square.png" alt="Photo not found!">
        <div class="caption">
            <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
        </div>
    </div>

以下是处理这些缩略图的css部分：

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: 0px;
        margin-left: 0px; /*this will set the position of the thumbnail in the screen*/
    }
.row {
    margin-right: 0px;
    margin-left: 0px; /*this will stop the page giving a horizontal bar even if the whole page fits in screen perfectly*/
}


.thumbnail {
    display: block;
    padding: 4px 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    line-height: 1;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 250px;
    height: 300px;
    border-style: solid;
    border-width: 3px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0);
    position: relative;
    left: 5px;
    top: 0px;
    -webkit-transition: border .2s ease-in-out; /*this whole section is responsible for thumbnail-related tasks*/
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}

.thumbnail .caption {
    padding: 28px;
    color: #333;
    position: relative;
    top: -15%; /*this part handles the Software Name position and its related attributes*/
}

我真的很抱歉打扰你，但这让我烦恼。我尝试了很多次，但我无法解决问题

谁能告诉我哪里出错了？

Answer 1

嗨，添加此项以更改下拉颜色

.dropdown.open a
{
background-color:red;
}

希望这有效......

Answer 2

第一个问题： 您需要找到处理导航栏中链接的css属性，并进行如下编辑：

.navbar-nav > .open > a, .navbar-nav > .open > a:hover, .navbar-nav > .open > a:focus {
    color: #FFF !important;
    background-color: #1eb321; /* or whatever your green color code is */
}

.nav li a:hover, .nav li a:focus {
    outline: 0; 
}

然后还会删除HTML中的style属性，使其保持如下：

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Our Softwares<span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Software 1</a></li>
    <li><a href="#">Software 2</a></li>
    <li><a href="#">Software 3</a></li>

  </ul>
</li>

关于第二个问题： 尝试修改html的结构，确保每个缩略图都有这样的网格模板类：

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="photos/square.png" alt="Photo not found!">
      <div class="caption">
        <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="photos/square.png" alt="Photo not found!">
      <div class="caption">
        <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="photos/square.png" alt="Photo not found!">
      <div class="caption">
        <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
      </div>
    </div>
  </div>

</div>

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="photos/square.png" alt="Photo not found!">
      <div class="caption">
        <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
      </div>
    </div>
  </div>


  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="photos/square.png" alt="Photo not found!">
      <div class="caption">
        <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
      </div>
    </div>
  </div>

</div>

另外，更好的建议如果我是你，将使用砌体网格库来安排每个缩略图。总是像魅力:) Masonry Page Link。他们详细描述了如何在项目中使用它。欢呼声。

如何设置导航栏的下拉列表'单击按钮颜色

2 个答案: