Bootstrap：我的专栏没有显示内联

Question

我试图根据引导程序编写一个css，只编写我知道我会在我的网页中使用的那些元素，但是存在一个问题：当我在我的style.css中自定义列时，元素是＆n＆ ＃39; t显示在一行中，这些之间有一个间隔，这里是一张图片：

＆＃13;

＆＃13;

html
{
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body
{
  margin: 0;
}
.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row
{
  margin-right: -15px;
  margin-left: -15px;
}

.logo, .bar, .post
{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.logo, .bar, .post
{
  float: left;
}
.logo{width: 30%;background-color: yellow;}
.bar{width: 40%;background-color: blue;}
.post{width: 30%;background-color: red;}

＆＃13;

<div class="container">
  <div class="row">
    <div class="logo">hello</div>
    <div class="bar">world</div>
    <div class="post">bruh</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为什么你不使用默认的bootstrap cols？

<div class="col-md-4">Hello</div>
<div class="col-md-4">Word</div>
<div class="col-md-4">Bruh</div>

bootstrap grid system

Answer 2

为什么不使用默认的Bootstrap列（例如在@ Booster的回答中）？

但是，如果您想自己制作内联列：

问题是您要为每个padding添加<div>，这会导致额外的宽度。

要制作整个宽度的padding部分，请添加：

box-sizing: border-box;

到

.logo, .bar, .post

样式。

请参阅JSFiddle上的工作示例。

Answer 3

在bootstrap中，您可以在行作为类

的元素中使用前缀 col -

例如，

与md类似 col-md 对于meduim尺寸设备而言意义

对于小型设备，使用sm col-sm

和lg喜欢大型设备的 col-lg

并且您只能使用12列 meduim设备的示例

<div class="row">
   <div class="col-md-1">col 1</div>
     ... 
   <div class="col-md-1">col 12</div>
</div>

Answer 4

您必须使用box-sizing：

＆＃13;

＆＃13;

html
{
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body
{
  margin: 0;
}
.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row
{
  margin-right: -15px;
  margin-left: -15px;
}

.logo, .bar, .post
{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}
.logo, .bar, .post
{
  float: left;
}
.logo{width: 30%;background-color: yellow;}
.bar{width: 40%;background-color: blue;}
.post{width: 30%;background-color: red;}

＆＃13;

<div class="container">
  <div class="row">
    <div class="logo">hello</div>
    <div class="bar">world</div>
    <div class="post">bruh</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;