代码之家 › 专栏 › 技术社区 › Alex

使用网格的正确方法是什么?[已关闭]

grid-layout twitter-bootstrap html

Alex · 技术社区 · 11 年前

我刚刚开始学习引导。这是我第一次使用网格进行布局。关于网格,我不理解的是我应该把内容放在哪里。

我应该这样做吗

<div class="row">
    <div class="col-md-12">
        <p> My content </p>
    </div>
</div>

或者我应该像这样为我的内容使用父元素

<div class="row">
    <div class="col-md-12">
        <div> or <footer> or <aside> or <content> etc
            <p> My content </p>
        </div> or </footer> or </aside> or </content> etc
    </div>
</div>

如果答案是第二个。是否有任何理由可以将内容直接放入专栏?或者我误解了一切,应该用完全不同的方式来做?

什么是“最佳实践”?

3 回复 | 直到 11 年前

Scott Simpson 11 年前

最好的方法是这样的:

<div class="container">
 <div class="row">
    <div class="col-md-12">
       <div class="your-widget-name">
         Widget code hereâ¦
       <div>
   </div>
</div>

这样,可以在多个布局中使用小部件。对网格使用单独的div可以增加标记量,但使代码更易于维护。

slashsharp 11 年前

内容应按照引导中的说明放在列中 documentation

在您的示例中,这两个都是正确的,因为网格仅用于布局,您可以在其中放置任何块或内联元素。

Ivan86 11 年前

最重要的规则- .container 是父项,其子项是 .row , .col 进入行内,内容进入 .col列 .

你想把图像放在中间,段落放在旁边。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <p>Lorem ipsum</p>
    </div>
    <div class="col-xs-4">
      <img src="http://placehold.it/150x150" alt="image"/>
    </div>
    <div class="col-xs-4">
      <p>Lorem ipsum summun</p>
    </div>
  </div>
</div>

推荐文章

xajetin · 导航不更改滚动上的颜色

4 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

4 年前

Bryan Santos · 固定表头与引导

4 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

4 年前

tym · 根据用户偏好显示字段

4 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

4 年前

Pavel · 当验证DIV可见时,引导网格会移动

8 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

8 年前

Alexander David · 折叠卡打开,然后立即再次关闭

8 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

8 年前