Html 引导：偏移列内容未居中和包装问题_Html_Css_Twitter Bootstrap

Html 引导：偏移列内容未居中和包装问题

html css twitter-bootstrap

Html 引导：偏移列内容未居中和包装问题,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我希望8列集中在页面的中间，但是当它在不同的设备尺寸下使用时，我很难把它放在中间，并正确地包装。以下是该部分网站的相关代码。我相信，文本的包装问题在大断点处显示，而在中断点处，情况看起来很好 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> &l

我希望8列集中在页面的中间，但是当它在不同的设备尺寸下使用时，我很难把它放在中间，并正确地包装。以下是该部分网站的相关代码。我相信，文本的包装问题在大断点处显示，而在中断点处，情况看起来很好

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Zac Litwinchuk : About</title>
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\style.css">
<script defer src="js\fontawesome-all.min.js"></script>
</head>

<body class="bg-secondary">
  <div class="container-fluid bg-light">


<div class="col-md-10 offset-md-2 my-3 px-0 ">
<h2>Get In Touch</h2>
<p>Please feel free to contact me via the below form</p>
<p>Do not hesitate to contact me via social media. My social media links are in the footer section of my website.</p>
<p>A downloadable version of my resume is available at the below link.</p>
<a class="btn btn-success text-light">Download My Resume</a>
</div>

<hr>

<form class="offset-md-2 my-3 ">
<div class="form-row">
<div class="form-group col-md-5">
  <label>First Name</label>
  <input type="text" class="form-control" placeholder="First Name">
</div>

<div class="form-group col-md-5">
  <label>Last Name</label>
  <input type="text" class="form-control" placeholder="Last Name">
</div>
</div>

<div class="form-row">
<div class="form-group col-md-10">
<label>Email Address</label>
<input type="email" class="form-control">
</div>
</div>

<div class="form-row">
<div class="form-group col-md-10">
<label>Your Message</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</div>

<button type="submit" class="btn btn-success btn-lg">Send</button>
</form>



  <footer class="row bg-dark text-light">
    <div class="col-md-8 mt-2 mb-1">
      <p> ©  | 2018</p>
    </div>

    <div class="col-md-4 text-right mt-2 mb-1">
      <a class="text-light" href="#"><i class="fab fa-twitter-square fa-2x mr-1"></i></a>
      <a class="text-light" href="#"><i class="fab fa-linkedin fa-2x mr-1"></i></a>
    </div>
  </footer>


  </div>


<script src="js\jquery-3.2.1.slim.min.js"></script>
<script src="js\popper.min.js"></script>
<script src="js\bootstrap.min.js"></script>
<script src="js\typewriter.min.js"></script>


扎克：关于
联系
请随时通过以下表格与我联系
请随时通过社交媒体与我联系。我的社交媒体链接在我网站的页脚部分
我的简历可从以下链接下载

试试这个

col-md-10 mx-auto

代替

col-md-10 offset-md-2 my-3 px-0

试试这个

col-md-10 mx-auto

而不是

col-md-10 offset-md-2 my-3 px-0

您非常接近您想要的结果，但您的方法中存在一些结构性错误。您没有将

.col-*-*

包装在

.row

元素中，这将始终导致列的布局有点“错误”。另一个问题是

offset-*-*

同时适用于左侧和右侧。所以

offset-md-2

实际上意味着“将该列向左偏移2，向右偏移2”

演示所需布局的最小方法类似于下面的代码。我添加了一些类来显示/隐藏不同断点处的某些文本，以便您可以看到它将如何调整：


XS:我是12列，没有偏移量。
MD:我是10列，左右各有一个偏移量。
LG:我是8列，左右偏移量为2。

您非常接近您想要的结果，但您的方法中存在一些结构性错误。您没有将

.col-*-*

包装在

.row

元素中，这将始终导致列的布局有点“错误”。另一个问题是

offset-*-*

同时适用于左侧和右侧。所以

offset-md-2

实际上意味着“将该列向左偏移2，向右偏移2”

演示所需布局的最小方法类似于下面的代码。我添加了一些类来显示/隐藏不同断点处的某些文本，以便您可以看到它将如何调整：


XS:我是12列，没有偏移量。
MD:我是10列，左右各有一个偏移量。
LG:我是8列，左右偏移量为2。

没有

.row

到位，您的

.col-*-*

将始终略微偏移。行包装器是调整边距所必需的。啊，好的。。。我错过了，我忘了。划船。我是否应该将包含文本的div与另一个包含.row的div包装在一起？不确定在这种情况下将.col与.row放在一起是否有效。欢迎使用SO。请看这里了解如何改进您的问题（格式、校对、提供代码等）：尝试将您的

col-md-10

col-md-8

设置为

，看看没有是否更好。行
放置在您的位置。col-*
始终会稍微偏离。行包装器是调整边距所必需的。啊，好的。。。我错过了，我忘了。划船。我是否应该将包含文本的div与另一个包含.row的div包装在一起？不确定在这种情况下将.col与.row放在一起是否有效。欢迎使用SO。请看一下这里，了解如何改进您的问题（格式、校对、提供代码等）：尝试将您的col-md-10
acol-md-8
，看看这是否更好。我需要在回答中澄清一个误导性的句子<代码>偏移-**/COD>只从左边推，只是当使用它以网格项目为中心时，你必须考虑右边需要相等的间隙。我写答案的方式听起来好像两边都有一个偏移量<代码>偏移-**/COD>只从左边推，只是当使用它以网格项目为中心时，你必须考虑右边需要相等的间隙。我写答案的方式听起来好像两边都有偏移量。