Why is CommandLink breaking Twitter Bootstrap styling?

Question

Having some issues rewriting Twitter Bootstrap components in Apex. I had an issue with an img tag referencing a static resource but overcame that. Now I want to add an Apex action to a button. I thought I could just use apex:commandLink but it breaks my styling. Rendering the button out of the context of the outer divs. Given that the anchor tag is styled by bootstrap do I need to keep using it and figure out another way of adding the apex action?

Updated: added some more code.

Styling works (but no action):

 <apex:form >
  <div id = "force">
    <apex:pageBlock id="block" title="" mode="edit">
    <apex:pageBlockSection showHeader="false" columns="2">
      <apex:repeat value="{!function}" var="format">
        <div class="col-lg-2 col-sm-2 col-md-2">
        <div class="thumbnail">
            <a class="btn btn-primary">Select</a>
        </div>
        </div>
     </apex:repeat>
    </apex:pageBlockSection>
   </apex:pageBlock>
  </div>
 </apex:form>

Breaks styling but has action:

 <apex:form >
  <div id = "force">
    <apex:pageBlock id="block" title="" mode="edit">
    <apex:pageBlockSection showHeader="false" columns="2">
      <apex:repeat value="{!function}" var="format">
        <div class="col-lg-2 col-sm-2 col-md-2">
        <div class="thumbnail">
           <apex:commandLink action="{!step2}" styleClass="btn btn-primary" value="Select"/>
        </div>
        </div>
     </apex:repeat>
    </apex:pageBlockSection>
   </apex:pageBlock>
  </div>
 </apex:form>

Answer 1

This is how I solved it. I added an action function. Adding any Apex tags into my inner divs broke the bootstrap styling.

<apex:form >
  <div id = "force">
    <apex:pageBlock id="block" title="" mode="edit">
    <apex:pageBlockSection showHeader="false" columns="2">
    <apex:repeat value="{!function}" var="format">
      <div class="col-lg-2 col-sm-2 col-md-2">
      <div class="thumbnail">
        <a href="" class="btn btn-primary" onclick="myFunction()">Select
                </a>
      </div>
      </div>
    </apex:repeat>
  </apex:pageBlockSection>
  </apex:pageBlock>
 </div>
 <apex:actionFunction action="{!step2}" name="myFunction" />
 </apex:form> 

Answer 2

Further update. It appears that the root problem was my mix of HTML and Apex. Converting more of the page to Apex tags solved the issues. Particularly using outputPanel instead of Divs and using apex:define to replace Head and Body.