Cant 样式 Bootstrap 和普通元素答案

【问题标题】：Cant style Bootstrap and normal elementsCant 样式 Bootstrap 和普通元素
【发布时间】：2017-11-16 22:02:40
【问题描述】：

我似乎无法为我的网站设置样式...例如<pre> 标签。

我所做的一切都不起作用。我正在尝试设置 whois 结果的样式，我尝试将其包装在一个 div 中并对其进行样式设置，仅设置 pre 标签的样式，对所有内容进行样式设置。我似乎无法让它工作。我希望我错过了一些愚蠢的东西。你可以从 CSS 中看到我已经尝试了很多组合（尝试删除它们只是有 pre ect）

导航栏：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="javascript.js"></script>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>

<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
  <div class="container-fluid">
    <div class="navbar-header">
       <div class="nav-bar-logo">
      <a href="index.php" class="navbar-left"><img src="images/cwcs-logo.png"></a>
        </div>
      </div>
    <div class="nav-list-container">
       <ul class="nav navbar-nav">
      <li><a href="domaindiagnostics.php">Domain Diagnostics</a></li>
      <li><a id="sd" href="#">Server Diagnostics</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a id="dc" href="#">Daily Checklist</a></li>
          <li><a id="bt" href="#">Backup Tracker</a></li>
          <li><a id="tl" href="#">Task List</a></li>
        </ul>
      </li>
    </ul>
    </div>
  </div>
</nav>
<!------- End of nav bar ---->

主页 -

<?php
## Includes nav bar
include('navbar.php');
include('phpfiles/domainclass.php');

if (isset($_GET['userInput'])) 
{
    $domainName = $_GET['userInput'];
}

?>

<!---- The input form ---->
<form class="form">
<div class="domainquery">
  <div class="input-group">
      <input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="<?php if (isset($domainName)) echo $domainName ?>" autocomplete="off" autofocus>
        <div class="input-group-btn">
          <button type="submit" class="btn btn-primary btn-md">Query Domain</button>
        </div>
  </div>
</div>
</form>
<!---- End of input form --->

<!---- start of content --->
<div class ="container-fluid">

<!----- Check of the variable has been set before showing --->
  <?php 
    ##checks if the variable name $domainName is set, before loading everything below
    if (isset($domainName)): 
  ?>
  <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">

  <h3>DNS Records </h3>
          <div class="dnscontain">
                  <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".dnscontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "<?php echo $domainName ?>",
                               q: 'dns'
                      });
                    </script> 

          </div>

  <h3>SSL Result</h3>


  <h3>NMAP Result</h3>
          <div class="nmapcontain">
                    <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".nmapcontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "<?php echo $domainName ?>",
                               q: 'nmap'
                      });
                    </script> 
          </div>
  <h3>PING Result</h3>
                  <div class="pingcontain">
                    <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".pingcontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "<?php echo $domainName ?>",
                               q: 'ping'
                      });
                    </script> 
                  </div>
<!--- Closing div tag for left column -->        
</div>

<!--- starting right column -->
  <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
        <h3>WHOIS Result</h3>
          <div class="whoiscontain">
                    <script>
                            // Loads the return vaue of the call into the "whoiscontain" div.
                           $(".whoiscontain").load("ajaxhandler.php", 
                            {  // ajax call to pass variable to ajax handler, which then decides what to do with it      
                               d: "<?php echo $domainName ?>",
                               q: 'whois'
                            });
                    </script> 
          <!--Whoiscontain div end -->          
          </div>
 <!--- right column div end -->         
  </div>

<!--- closing div tag for 1st row --->
</div>
 </div> 
<!---- ends the check on if the variable is set -->          
<?php
###End the "IF" check 
endif 
?>

<!---- Closing div tag for container-fluid --->
</div> 


</body>
</html>

Ajax 返回页面 --

<?php
include 'domainclass.php';

$result = domain::getWhois($domainName);
?>

<pre class="whois">  <?php echo $result ?> </pre>;

样式表

.header
{
  margin:1%;
}


.domainquery
{
    margin-bottom:3%;
    padding:40px 50px;
}

.nav-bar-logo
{
  margin-right:20px;
  padding-right:20px;
}

.table
{
  font-size:5px;
}
pre .whois
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}

.whoiscontain
{
white-space:pre-wrap;
background-color:black;
width:100%;
color:white;
word-wrap: break-word;
}

pre
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;

}

按要求输出页面的 HTML （忽略引导样式表上方的样式表，正在尝试一些事情。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="javascript.js"></script>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>

<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
  <div class="container-fluid">
    <div class="navbar-header">
       <div class="nav-bar-logo">
      <a href="index.php" class="navbar-left"><img src="images/cwcs-logo.png"></a>
        </div>
      </div>
    <div class="nav-list-container">
       <ul class="nav navbar-nav">
      <li><a href="domaindiagnostics.php">Domain Diagnostics</a></li>
      <li><a id="sd" href="#">Server Diagnostics</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a id="dc" href="#">Daily Checklist</a></li>
          <li><a id="bt" href="#">Backup Tracker</a></li>
          <li><a id="tl" href="#">Task List</a></li>
        </ul>
      </li>
    </ul>
    </div>
  </div>
</nav>
<!------- End of nav bar ---->

<!---- The input form ---->
<form class="form">
<div class="domainquery">
  <div class="input-group">
      <input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="lomcn.org" autocomplete="off" autofocus>
        <div class="input-group-btn">
          <button type="submit" class="btn btn-primary btn-md">Query Domain</button>
        </div>
  </div>
</div>
</form>
<!---- End of input form --->

<!---- start of content --->
<div class ="container-fluid">

<!----- Check of the variable has been set before showing --->
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">

  <h3>DNS Records </h3>
          <div class="dnscontain">
                  <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".dnscontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "lomcn.org",
                               q: 'dns'
                      });
                    </script> 

          </div>

  <h3>SSL Result</h3>


  <h3>NMAP Result</h3>
          <div class="nmapcontain">
                    <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".nmapcontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "lomcn.org",
                               q: 'nmap'
                      });
                    </script> 
          </div>
  <h3>PING Result</h3>
                  <div class="pingcontain">
                    <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".pingcontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "lomcn.org",
                               q: 'ping'
                      });
                    </script> 
                  </div>

    <h3>Tracert Result</h3>
                  <div class="tracecontain">
                    <script>
                      // Loads the return vaue of the call into the "dnscontain" div.
                      $(".tracecontain").load("ajaxhandler.php", 
                      {  // ajax call to pass variable to ajax handler, which then decides what to do with it        
                               d: "lomcn.org",
                               q: 'trace'
                      });
                    </script> 
                  </div>
<!--- Closing div tag for left column -->        
</div>

<!--- starting right column -->
  <div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
        <h3>WHOIS Result</h3>
          <div class="whoiscontain">
                    <script>
                            // Loads the return vaue of the call into the "whoiscontain" div.
                           $(".whoiscontain").load("ajaxhandler.php", 
                            {  // ajax call to pass variable to ajax handler, which then decides what to do with it      
                               d: "lomcn.org",
                               q: 'whois'
                            });
                    </script> 
          <!--Whoiscontain div end -->          
          </div>
 <!--- right column div end -->         
  </div>

<!--- closing div tag for 1st row --->
</div>
 </div> 
<!---- ends the check on if the variable is set -->          

<!---- Closing div tag for container-fluid --->
</div> 


</body>
</html>

【问题讨论】：

将pre .whois 更改为pre.whois 并根据@tilz0R 的回答修复您的link 标签
缺少“
除了向我们展示 php 和 ajax 响应之外，您是否可以将在浏览器中为页面呈现的 HTML 放在这里，这样我们就不必为您将这些部分放在一起发现 CSS 问题？
添加到底部帖子，我包括了 ajax 等，因为我认为这就是它不起作用的原因。
您编写的任何 CSS 是否有效？您是否 100% 确定要写入 CSS 的文件已被浏览器成功读取？

标签： html css ajax twitter-bootstrap

【解决方案1】：

要设置引导程序样式，您可以覆盖引导程序样式或制作自己的新样式。

他们建议不要直接编辑 bootstrap .CSS，因此对 bootstrap 的更新不会改变您的设计。

您将自己的样式表调用放在引导调用下方是正确的，因此您的样式表调用将被覆盖。

即使您的样式会覆盖，您也可能无法覆盖具有 !important 标签的引导规则。您可以在样式表中使用引导类和 ID 并制定新规则，使用您自己的 !Important 在必要时强制它们通过，或者为您的样式添加其他类：

a bit of code

    was `<div class="col-md-12">`

    make `<div class="col-md-12 myCol">`

然后在你的样式表上为

制定规则

.myCol{ 这些风格应该坚持 }

【讨论】：