Question

所以，让我直截了当地说，这个标题与之前的问题非常相似，但是，我尝试了他们告诉我的内容并且它不起作用。所以，我已经看到了几个答案（即Using Bootstrap and my own CSS together），他们告诉你链接到Bootstrap CSS 首先然后你的CSS 最后以便你可以让你的CSS覆盖所有以前存在的东西等等。

无论如何，我尝试过这个并没有用。我基本上是这样说的，因为通常看起来像这样：

已改为：

一切都归功于Bootstrap！我想知道是否还有其他方法，因为我的CSS已经在Bootstrap CDN之后排成一行。

代码：

::-moz-selection {
  color: #000000;
    background: #1ED6D3;
}

::selection {
    color: #000000;
    background: #1ED6D3;
}
#menuBar {
  height: 85px;
  width: 100%;
  background-color: #F2F2F2;
  position: relative;
}
.titleButton, #contactButton {
  font-family: 'Lato', sans-serif;
  font-size: 30px;
  border-bottom: 3px groove;
  border-radius: 2px;
  line-height: 2.5;
}
.titleSpacer {
  margin-right: 10%;
}
.titleButton, .titleSpacer, #contactButton {
  display: inline;
}
.titleButton:hover, #contactButton:hover {
  cursor: pointer;
  border-bottom: 2px groove black;
}
#title {
  font-family: 'Roboto', sans-serif;
  margin-top: 200px;
  font-size: 28px;
  color: #7F7F7F;
  font-weight: 500;
}
#searchResultsTitle {
  font-family: 'Roboto', sans-serif;
  margin-top: 40px;
  margin-bottom: 25px;
  font-size: 28px;
  color: #7F7F7F;
  font-weight: 500;
  display: none;
}
#subtext {
  color: #47BC47;
  font-weight: normal;
}
#subtitle {
  font-family: 'Montserrat', sans-serif;
  color: #3D3D3D;
  font-size: 26px;
  margin-top: 75px;
}
#searchBox {
  width: 500px;
  height: 50px;
  border-radius: 12px;
  border: 3px solid #B2B2B2;
  padding-left: 10px;
  padding-right: 65px;
  padding-bottom: 4px;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
}
#searchBox:focus {
  outline: none;
}
#downArrow {
  width: 50px;
}
body::-webkit-scrollbar {
  width: 9px;
}
.hoverText {
  cursor: pointer;
}
body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: #1ED6D3;
  border-radius: 20px;
}
#searchButton {
  width: 50px;
  height: 50px;
  margin-bottom: -20px;
  margin-left: -65px;
}
#searchButton:hover {
  cursor: pointer;
}
#searchBox, #searchButton {
  display: inline;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Home | CyanCoding</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="index.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="home.js"></script>
    <link rel="icon" href="Logo.ico">
    <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Open+Sans|PT+Sans|Questrial|Raleway|Roboto|Work+Sans" rel="stylesheet">
  </head>
  <body>
    <h2 id = "subtitle">Search through 25+ programs</h2>
    <input type = "text" autocomplete = "false" id = "searchBox" name = "searchBox" placeholder = "Search for a program">
    <img id = "searchButton" src = "https://coursesearch.uchicago.edu/cs/prdguest/cache/UC_SEARCH_ICON_170616.PNG">
  </body>
</html>

Answer 1

问题在于，引导程序覆盖了box-sizing上从input到content-box的{{1}}设置，因此您的border-box填充包含在元素内{ {1}}。

Bootstrap还将搜索按钮图片设置为input，而不是默认50px height。

我已在middle添加了评论，我已对此进行了更新。基本上，更改看起来像这样：

baseline

请参阅下面的运行代码：

＆＃13;

css

＆＃13;

#subtitle {
  font-family: 'Montserrat', sans-serif;
  color: #3D3D3D;
  font-size: 26px;
  margin-top: 75px;
  font-weight: bold; /* Added */
}

#searchBox {
  width: 500px;
  height: 50px;
  border-radius: 12px;
  border: 3px solid #B2B2B2;
  padding-left: 10px;
  padding-right: 65px;
  padding-bottom: 4px;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  box-sizing:content-box; /* Added */
}

#searchButton {
  width: 50px;
  height: 50px;
  margin-bottom: -20px;
  margin-left: -65px;
  vertical-align:baseline; /* Added */
}

＆＃13;

Bootstrap正在改变预制CSS

1 个答案: