Html 中央驾驶室_Html_Css_Twitter Bootstrap

Html 中央驾驶室

html css twitter-bootstrap

Html 中央驾驶室,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在尝试为我的网站做主页，我有图片它应该是什么样子我试过使用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&g

我正在尝试为我的网站做主页，我有图片它应该是什么样子我试过使用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>

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

.content{
宽度：250px；
填充：20px；
利润率：10px；
边框：实心10px黑色；
文本对齐：居中；
字体大小：xx大号；
}
#包装纸{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
#中间的{
显示器：flex；
}


柔性箱
文本
文本
文本
文本

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

.content{
宽度：250px；
填充：20px；
利润率：10px；
边框：实心10px黑色；
文本对齐：居中；
字体大小：xx大号；
}
#包装纸{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
#中间的{
显示器：flex；
}


柔性箱
文本
文本
文本
文本

如果您提供了一些代码，这会很有帮助，但是为了获得与该图像一样的代码，我提供了下面的代码-可以从那里进行调整：

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


顶部
左边
赖特
底部

如果您提供了一些代码，这会很有帮助，但是为了获得与该图像一样的代码，我提供了下面的代码-可以从那里进行调整：

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


顶部
左边
赖特
底部

您没有关闭每一行

，这是引导网格按您希望的方式工作所必需的
我想这取决于引导版本，但至少在codepen中，偏移类的命名必须不同：offset-md-5
而不是col-md-offset-5
和类似的名称。某些引导版本中似乎存在错误或不一致-另请参见此问题：
以下是适用于您在代码笔中的情况的工作代码：

此处添加了从CODEPEN编辑/编码（但没有引导CSS，即没有它无法工作）：


关于
技能
项目
接触
您没有关闭每一行，这是引导网格按您希望的方式工作所必需的
我想这取决于引导版本，但至少在codepen中，偏移类的命名必须不同：offset-md-5
而不是col-md-offset-5
和类似的名称。某些引导版本中似乎存在错误或不一致-另请参见此问题：
以下是适用于您在代码笔中的情况的工作代码：

此处添加了从CODEPEN编辑/编码（但没有引导CSS，即没有它无法工作）：


关于
技能
项目
接触
我将div和span标记与css属性（如块、跨浏览器内联块和文本对齐中心）一起使用，请参见下面的简单示例，但解决方案来自

页面标题
.block{display:block；}
.text居中{文本对齐：居中；}
.border虚线黑色{border:1px虚线黑色；}
.内联块{
显示：-moz内联堆栈；
显示：内联块；
缩放：1；
*显示：内联；
}
.border纯黑色{border:1px纯黑色；}
.text left{text align:left；}
jjjjjk
我将div和span标记与css属性（如块、跨浏览器内联块和文本对齐中心）一起使用，请参见下面的简单示例，但解决方案来自

页面标题
.block{display:block；}
.text居中{文本对齐：居中；}
.border虚线黑色{border:1px虚线黑色；}
.内联块{
显示：-moz内联堆栈；
显示：内联块；
缩放：1；
*显示：内联；
}
.border纯黑色{border:1px纯黑色；}
.text left{text align:left；}
jjjjjk
ummm首先，我要包括您正在使用的代码。。第二可能是边距
？没有看到代码，任何人都无法提供帮助，只能从头开始写出来。告诉我们你尝试过什么，告诉我们哪些有效，哪些无效，然后我们会提供帮助。伙计，如果你不包含代码，没有人能帮你。我们在这里帮助您解决代码问题，继续我们的生活。我们不是来为您从头开始编写代码的。还有，你为什么不直接使用边距？@MichaelCoker我添加了codeummm首先我会包括你正在使用的代码。。第二可能是边距
？没有看到代码，任何人都无法提供帮助，只能从头开始写出来。告诉我们你尝试过什么，告诉我们哪些有效，哪些无效，然后我们会提供帮助。伙计，如果你不包含代码，没有人能帮你。我们在这里帮助您解决代码问题，继续我们的生活。我们不是来为您从头开始编写代码的。还有，为什么不直接使用边距？@MichaelCoker我添加了code所有行都是闭合的没有，它们不是：第一行没有闭合标记，第三行没有闭合标记