Question

我希望在页面中间居中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>

Answer 1

试试这个 col-md-10 mx-auto代替col-md-10 offset-md-2 my-3 px-0

Answer 2

您的预期结果非常接近，但您的方法存在一些结构性错误。您尚未将.col-*-*包裹在.row元素中，这将导致您的列略有错误＆＃39;在他们的布局。另一个问题是offset-*-*适用于左右两侧。因此，offset-md-2实际上意味着＆＃34;将此列偏离左侧的2，将右侧的2偏移＃34;。

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

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container-fluid">	
  <div class="row">
    <div class="col col-md-10 offset-md-1 col-lg-8 offset-lg-2">
      <div class="bg-success p-4 text-light d-block d-md-none  d-lg-none"><strong class="mr-2">XS:</strong>I am 12 columns with no offset.</div>
      <div class="bg-danger p-4 text-light d-none d-md-block d-lg-none"><strong class="mr-2">MD:</strong>I am 10 columns with 1 offset left and right.</div>
      <div class="bg-info p-4 text-light d-none d-lg-block"><strong class="mr-2">LG:</strong>I am 8 columns with 2 offset left and right.</div>
    </div>
  </div>
</div>

＆＃13;

您需要展开代码段以查看所有断点，以便了解offset与col一起使用的方式。

Bootstrap：偏移列内容不居中和包装问题

2 个答案: