Question

我正在尝试为我的网站做主页，我想了解它应该如何this 我试过使用Bootstrap，但它们都互相粘在一起我该如何解决这个问题？

这是我的html代码：

<div class=" container-fluid">
    <div class="row" style="margin-top: 15%;">
        <div class="col-md-2 col-md-offset-5 text-center menu">About</div>

        <div class="row">
        <div class="col-md-2 col-md-offset-4 text-center menu ">Skills</div>
        <div class="col-md-2 text-center menu">Projects</div>
        </div>

        <div class="col-md-2 col-md-offset-5 text-center menu">Contact</div>

    </div>
</div>

这是css：

.menu{
    font-family: 'Poiret One', cursive;
    font-size: 350%;
    color: white;
    background-color:grey;
    border: 1px solid black;
    opacity: 0.95;
    transition-property: all;
    transition-duration: 0.5s;
}

Answer 1

以下是Flexbox的一个简单示例：

＆＃13;

"use strict";

function runWhenDone(menu) {
    var day = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][new Date().getDay()];
    var c = document.createElement('p');
    c.innerHTML = "Special: " + menu[day].name;
    document.body.appendChild(c);
}

var specialMenu = {"Sunday": {"name": "shrimp cocktail", "price": "8.99"}, "Monday": {"name": "broasted chicken", "price": "5.40"}, "Tuesday": {"name": "mexicano® tacos", "price": "2.99"}, "Wednesday": {"name": "ruby\'s® champaign-cooked beef tacos", "price": "3.99"}, "Thursday": { "name": "dc\'s green arrow super nachos", "price": "9.99"}, "Friday": {"name": "jalapeno poppers", "price": "5.99"}};
runWhenDone(specialMenu);

＆＃13;

.content {
  width: 250px;
  padding: 20px;
  margin: 10px;
  border: solid 10px black;
  text-align: center;
  font-size: xx-large;
}

#wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#middle {
  display: flex;
}

＆＃13;

Answer 2

如果你提供了一些代码但是为了得到它就像那个图像一样有用，我提供了下面的代码 - 可以从那里进行调整：

        #topdiv{
            width:400px;
            height:40px;
            margin:0 auto;
            border: 2px solid black;
        }
        #leftdiv{
            float:left;
            width:30%;
            margin-left: 17%;
            border: 2px solid black;
        }
        #rightdiv{
            float:right;
            width:30%;
            margin-right: 17%;
            border: 2px solid black;
        }
        #bottomdiv{
            clear: both;
            position: relative;
            width:400px;
            height: 50px;
            bottom:0;
            margin: 0 auto;
            border: 2px solid black;
        }

然后HTML：

    <!DOCTYPE html>
    <html>
     <head>
        <link rel = "stylesheet" type = "text/css" href = "CSSFILE.css" />
     </head>
     <body>
      <div id = "topdiv">
         Top
      </div>
      <div id = "leftdiv">
         Left
      </div>
      <div id = "rightdiv">
         Right
      </div>
      <div id = "bottomdiv">
         Bottom
      </div>
     </body>
    </html>

Answer 3

您没有关闭每个row，这是引导网格以您希望的方式工作所必需的。

我认为它取决于bootstrap版本，但至少在codepen中，偏移类必须以不同的名称命名：offset-md-5而不是col-md-offset-5和类似。某些bootstrap版本似乎存在错误或某些不一致的问题 - 请参阅此问题：Bootstrap 4 accepting offset-md-*, instead col-offset-md-* Naming Convention Bug

以下是您在codepen中的情况的工作代码： https://codepen.io/anon/pen/NjxLdj

来自CODEPEN的编辑/代码（但没有 Bootstrap CSS，即不使用它）：

<div class="container-fluid">
  <div class="row" style="margin-top:15%;">
    <div class="col-md-2 offset-md-5 text-center menu">About</div>
  </div>
  <div class="row">
    <div class="col-md-2 offset-md-4 text-center menu">Skills</div>
    <div class="col-md-2 text-center menu">Projects</div>
  </div>
  <div class="row">
    <div class="col-md-2 offset-md-5 text-center menu">Contact</div>
  </div>
</div>

Answer 4

我使用div和span标签以及css属性，例如块，跨浏览器内联块和文本对齐中心，请参阅下面的简单示例，但解决方案是从Here

获得的

<!DOCTYPE html>
<html>
    <head>
       <title>Page Title</title>
       <style>
           .block{display:block;}
           .text-center{text-align:center;}
           .border-dashed-black{border:1px dashed black;}
           .inline-block{
                 display: -moz-inline-stack;
                 display: inline-block;
                 zoom: 1;
                 *display: inline;
            }
           .border-solid-black{border:1px solid black;}
           .text-left{text-align:left;}
        </style>
    </head>
    <body>
          <div class="block text-center border-dashed-black">
              <span class="block text-center">
                  <span class="block"> 
        <!-- The Div we want to center set any width as long as it is not more than the container-->
                      <div class="inline-block text-left border-solid-black" style="width:450px !important;">
                             jjjjjk
                      </div> 
                  </span>
              </span>
          </div>
      </body>
   </html>

中心div箱

4 个答案: