v4 - Card Column Sizing

AbbyJanke
创建于
2015-08-20 09:25:32

When putting column sizing on the card item itself, the header gets a little funky. But if you put the col-*-* as a div around it, there is no issues.

screenshot 2015-08-20 05 19 03

(As in screenshot)

<div class="card col-lg-3">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Works:

<div class="col-lg-3">
  <div class="card">
    <div class="card-header">
      Featured
    </div>
    <div class="card-block">
      <h4 class="card-title">Special title treatment</h4>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

Most other items in bootstrap this can be done and is nice to cut down on excess lines. Would be great to make this happen as well.

5条回答
cvrebert
回复于
2015-08-20 09:29:26
#1

Most other items in bootstrap this can be done

There are already some other widgets where wrapper divs are required (https://github.com/twbs/bootlint/wiki/E012), so this isn't hugely persuasive IMHO, but if it indeed can't be avoided for cards, it definitely needs to be documented.

AbbyJanke
回复于
2015-08-20 09:59:30
#2

Well, technically according to the style guide for html/css code bootstrap follows it does make more sense to:

http://codeguide.co/#html-reducing-markup

cvrebert
回复于
2015-08-20 10:16:02
#3

Oh yes it's most certainly one of the goals, it's just not achievable 100% of the time. Just trying to set expectations in the event that it ends up not being possible. We'll give it the old college try though. 😄

AbbyJanke
回复于
2015-08-20 10:20:51
#4

hehe Alrighty :P Just wanted to mention it cause you said it wasn't hugely persuasive but just kinda of figured that was a given, but then again i should never assume anymore given what i deal with everyday at my work..

mdo
回复于
2015-08-23 02:09:44
#5

Yeah for now a wrapper is required: http://v4-alpha.getbootstrap.com/components/card/#sizing.

当前位于第1页,总计5 条回复

推荐相似问题

getbootstrap.com navbar splits across 2 lines on narrower screens

My issue in image Something wrong in navbar?
讨论数 4
bootstrap
创建时间:2015-08-20 09:13:45

The size of .input-group contents does not change the size correctly when using the relative form sizing classes

<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1">@</span> <input type="te
讨论数 2
bootstrap
创建时间:2015-08-20 09:02:52

Documentation typo "flexbix"

Typo in this paragraph : http://v4-alpha.getbootstrap.com/getting-started/flexbox/#why-flexbox flexbix instead of flexbo
讨论数 4
bootstrap
创建时间:2015-08-20 08:55:43

Link to Wall of browser bugs from Browsers and devices page is broken

http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#desktop-browsers
讨论数 3
bootstrap
创建时间:2015-08-20 08:41:33

Wall of Browser Bugs is missing heading & horizontal padding

http://v4-alpha.getbootstrap.com/browser-bugs/
讨论数 2
bootstrap
创建时间:2015-08-20 08:40:37

escape key not work with modal,except i add tabindex="-1".

use Bootstrap v3.3.5. if not use tabindex="-1", escape key not work,but enter is ok to close modal in chrome. both escap
讨论数 5
bootstrap
创建时间:2015-08-20 08:13:18

Change "Not supported" to "N/A" for Safari on Windows

In desktop browsers, Safari is noted as "Not supported", but as its latest release is from 2011 (Safar 5.1), shouldn't t
讨论数 5
bootstrap
创建时间:2015-08-20 08:08:28

Cards aren't block-level but docs say they are

In the doc it's stated Cards are block-level by default But there is no display on card class so if I add it on a link i
讨论数 3
bootstrap
创建时间:2015-08-20 07:57:28

Remove JSCS in favor of more complete ESLint

ESLint has all the same rules as JSCS so there should be no reason to use both tools. Furthermore it would be good to up
讨论数 10
bootstrap
创建时间:2015-08-20 07:53:31

active and hovered checkbox button background colors should not be the same

If a v4 checkbox button is 'active' then clicking it with the cursor to uncheck it provides no visual feedback. This is
讨论数 6
bootstrap
创建时间:2015-08-20 07:47:58