问题描述:

ok, I'm a web design newbie so this will probably be an easy one for you. I'm trying to recreate this in bootstrap:

http://puu.sh/eKEnl/14aa343da4.png

Here's the path I'm on but it doesn't seem like the right one:

 <div class="container">

<div class="row">

<div class="col-md-12">

<div class="col-md-2 text-center">

<a href="#" class="btn btn-default btn-sm">pricing</a>

</div>

<div class="col-md-2 text-center">

<a href="#" class="btn btn-default btn-sm">advertise</a>

</div>

<div class="col-md-2 text-center">

<a href="#" class="btn btn-default btn-sm">book hotel</a>

</div>

<div class="col-md-2 text-center">

<a href="#" class="btn btn-default btn-sm">sponsor our <br>intl course</a>

</div>

<div class="col-md-2 text-center">

<a href="#" class="btn btn-default btn-sm">hold events/<br>meetings</a>

</div>

</div>

</div>

</div>

One of my challenges is to keep each button the same width and height.

Any help is much appreciated!

Thanks!

Tony

网友答案:

As a matter of fact you're doing it wrong. It's just a coincidence you have it running, but in other scenarios it won't, and you'll have other issues like aligning, etc.

Your problem is that you're nesting col.... inside col.... when you actually need to use .row --> .col-...-x (where x is a number and the sum of all those digits plus any offset you have must be 12).

In short: get rid of your col-md-12 container and use the grid system with those buttons, so your first col, first row should be <div class="col-md-2 col-md-offset-1"> and so on

about your circle button issue, change your HTML to this:

<div class="col-md-2 text-center"> <a href="#" class="btn btn-default btn-circle">
    <span>important <br/>dates</span>
    </a>
</div>

and then add this to your CSS:

.btn-circle {
    position:relative;
    text-align:center
}
.btn-circle span {
    position:absolute;
    top: 50%;
    left:50%;
    transform: translateY(-50%) translateX(-50%);
}

Since you're actually doing quite well by yourself, try to do it on your own using the explanation above, although you can check the full code here (but really, try to do it by yourself and only use the Bootply as last resource)

相关阅读:
Top