个人中心
gpt4 book ai didi

html - 倾斜样式 Bootstrap 和普通元素

转载 作者：行者123 更新时间：2023-11-28 03:34:47 24 4
gpt4 key购买 nike

我似乎无法设计我的网站...例如 <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(忽略 Bootstrap 样式表上方的样式表，正在尝试一些事情。

<!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>

最佳答案

要设置 bootstrap 样式，您可以覆盖 bootstrap 样式或创建您自己的新样式。

他们建议不要直接编辑 bootstrap .CSS，这样更新 bootstrap 就不会改变你的设计。

您将自己的样式表调用放在 Bootstrap 调用下方是正确的，这样您的样式表调用就会被覆盖。

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

a bit of code 

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

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

然后为您的样式表制定规则

.myCol{这些风格应该坚持

关于html - 倾斜样式 Bootstrap 和普通元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44550069/

24 4 0
文章推荐： c++ - .exe 与 .dll 作为一个程序的模块
文章推荐： c# - Umbraco 4.11.3 : Client side form upload (multipart/form-data) gives 404
文章推荐： c++ - 获取CString的结束位置
文章推荐： javascript - 如何在Visual Studio代码扩展中获取项目文件夹路径
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com