Question

我正试图让这些div在页面上居中。正如您所看到的，右侧有一些空白区域。我试过操纵盒子模型，即边距和填充，但无法弄清楚如何操纵右侧。是不是我正在使用col-md-5？

<!DOCTYPE html>
<html>
<head>
      <link rel="stylesheet" href="animate.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <link href="style.css" rel="stylesheet">
      <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Roboto|Merriweather|Europa">

</head>
<body>

<div class = "header">
<div class ="container-fluid">
<h1 id = "firstName">Header</h1>
</div>

<div class="container-fluid">
<div class="row">
<div class = "col-md-5">tile 1</div>
<div class = "col-md-5">tile 2</div>
<div class = "col-md-5">tile 1</div>
<div class = "col-md-5">tile 2</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>

html, body {
font-family:;
margin:0 auto;
padding:0px;
text-transform: none;
font-family: Europa;
letter-spacing: 0.5px;
}

.header h1 {
  background-color: none;
  margin: 30px;
}

.row {
  margin: 0 auto;
}
.container-fluid {
  padding:0;
  margin:0 auto;
}

.col-md-5 {
  background-color: red;
  margin: 30px;
  width:%;
  text-align:center;
}

Answer 1

html, body {
font-family:;
margin:0 auto;
padding:0px;
text-transform: none;
font-family: Europa;
letter-spacing: 0.5px;
}

.header h1 {
  background-color: none;
  margin: 30px 0;
}

.row {
  margin: 0 auto;
}
.container-fluid {
  padding:0;
  margin:0 auto;
}

.col-md-6 {
  margin-bottom: 15px; 
  width: 50%;
  float: left;
  text-align:center;
  padding: 0;
}
.col-md-6 .wrapper{
    padding: 15px; 
    background-color: red;
}

<!DOCTYPE html>
<html>
<head>
      <link rel="stylesheet" href="animate.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <link href="style.css" rel="stylesheet">
      <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Roboto|Merriweather|Europa">

</head>
<body>

<div class = "header">
<div class ="container-fluid">
<h1 id = "firstName">Header</h1>
</div>

<div class="container-fluid">
<div class="row">
<div class = "col-md-6"><div class="wrapper">tile 1</div></div>
<div class = "col-md-6"><div class="wrapper">tile 2</div></div>
<div class = "col-md-6"><div class="wrapper">tile 3</div></div>
<div class = "col-md-6"><div class="wrapper">tile 4</div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>

Answer 2

Bootstrap在12列网格布局上工作，因此右边这个间隙的原因基本上是因为你最后有2个空列。

您可以使用以下方法解决此问题：

func deleteDepartment(named name: String) {
    let fetch = NSFetchRequest<NSFetchRequestResult>(entityName: "Department")

    fetch.predicate = NSPredicate(format: "name = %@", name)

    let req = NSBatchDeleteRequest(fetchRequest: fetch)

    req.resultType = .resultTypeCount

    do {
        let result = try self.persistentContainer.viewContext.execute(req)
                            as? NSBatchDeleteResult

        print(result?.result as! Int)   // number of objects deleted

    } catch {
        fatalError("Error!!!!")
    }
}

这里的关键是偏移类，它将第一列偏移1.这将导致两个div两侧的间距相等。或者，您可以将<style> .row { margin-bottom: 1em; } .col-md-5 { background-color: red; /* For whitespace between elements */ background-clip: content-box; text-align: center; } </style> <div class="container-fluid"> <div class="row"> <div class="col-md-offset-1 col-md-5"> Title 1 </div> <div class="col-md-5"> Title 2 </div> </div> <div class="row"> <div class="col-md-offset-1 col-md-5"> Title 1 </div> <div class="col-md-5"> Title 2 </div> </div> </div>与.col-md-5交换，如果您不想在元素的任何一侧留下空格，也可以删除.col-md-6类，因为它不再需要。

顺便说一句，使用Bootstrap时，最好将元素保持在每行12列中，即2x col - * - 6或3x col - * - 4。否则，如果元素的高度不同，则会出现浮动问题。

附加Codepen示例：https://codepen.io/raptorkraine/pen/prmjeE

Answer 3

使用保证金：0自动，如上面的答案所示，在我的书中非常难看;特别是当有更优雅的解决方案时。

我认为你应该忘记col-md- *。给你想要的divs宽度，如果你想要它们连续2行，那么将它们放在一行中。 Flex是你的朋友。

*html*
<div class="row">
    <div class="wrapper">tile 1</div>
    <div class="wrapper">tile 2</div>
</div>
<div class="row">
    <div class="wrapper">tile 3</div>
    <div class="wrapper">tile 4</div>
</div>

*css*
.row {
  display: flex;
  justify-content: space-around;
}

.wrapper {
  width: 40% //or anything you want e.g. 40vw, 800px, etc
  display: flex;
  flex-direction: column; // align text contents as a column
  justify-content: space-around; // aligns in center of column
}

可能会这样做。

Answer 4

使用col表示您的行分为12个部分，col-md-5表示您使用的是5/12行。正如我所看到的，你正在使用2 col-md-5所以它只使用了10/12行的宽度，这就是为什么右边有一些空白

Answer 5

我习惯在我的项目中使用这个css类，当我想将任何元素集中在它的父级中时：

.centerElement{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

希望它有所帮助......

如何将div排成一行？

5 个答案: