docs(3.3): fix input-groups link (#32004)

docs/3.3/css/index.html

@@ -370,7 +370,7 @@ To edit settings, press <span class=nt>&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span cl
     <span class=nt>&lt;/label&gt;</span>
   <span class=nt>&lt;/div&gt;</span>
   <span class=nt>&lt;button</span> <span class=na>type=</span><span class=s>"submit"</span> <span class=na>class=</span><span class=s>"btn btn-default"</span><span class=nt>&gt;</span>Submit<span class=nt>&lt;/button&gt;</span>
-<span class=nt>&lt;/form&gt;</span></code></pre></figure> <div class="bs-callout bs-callout-warning" id=callout-formgroup-inputgroup> <h4>Don't mix form groups with input groups</h4> <p>Do not mix form groups directly with <a href=/components/#input-groups>input groups</a>. Instead, nest the input group inside of the form group.</p> </div> <h2 id=forms-inline>Inline form</h2> <p>Add <code>.form-inline</code> to your form (which doesn't have to be a <code>&lt;form&gt;</code>) for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p> <div class="bs-callout bs-callout-danger" id=callout-inline-form-width> <h4>May require custom widths</h4> <p>Inputs and selects have <code>width: 100%;</code> applied by default in Bootstrap. Within inline forms, we reset that to <code>width: auto;</code> so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p> </div> <div class="bs-callout bs-callout-warning" id=callout-inline-form-labels> <h4>Always add labels</h4> <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p> </div> <div class=bs-example data-example-id=simple-form-inline> <form class=form-inline> <div class=form-group> <label for=exampleInputName2>Name</label> <input class=form-control id=exampleInputName2 placeholder="Jane Doe"> </div> <div class=form-group> <label for=exampleInputEmail2>Email</label> <input type=email class=form-control id=exampleInputEmail2 placeholder=jane.doe@example.com> </div> <button type=submit class="btn btn-default">Send invitation</button> </form> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt>&lt;form</span> <span class=na>class=</span><span class=s>"form-inline"</span><span class=nt>&gt;</span>
+<span class=nt>&lt;/form&gt;</span></code></pre></figure> <div class="bs-callout bs-callout-warning" id=callout-formgroup-inputgroup> <h4>Don't mix form groups with input groups</h4> <p>Do not mix form groups directly with <a href=../components/#input-groups>input groups</a>. Instead, nest the input group inside of the form group.</p> </div> <h2 id=forms-inline>Inline form</h2> <p>Add <code>.form-inline</code> to your form (which doesn't have to be a <code>&lt;form&gt;</code>) for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p> <div class="bs-callout bs-callout-danger" id=callout-inline-form-width> <h4>May require custom widths</h4> <p>Inputs and selects have <code>width: 100%;</code> applied by default in Bootstrap. Within inline forms, we reset that to <code>width: auto;</code> so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p> </div> <div class="bs-callout bs-callout-warning" id=callout-inline-form-labels> <h4>Always add labels</h4> <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p> </div> <div class=bs-example data-example-id=simple-form-inline> <form class=form-inline> <div class=form-group> <label for=exampleInputName2>Name</label> <input class=form-control id=exampleInputName2 placeholder="Jane Doe"> </div> <div class=form-group> <label for=exampleInputEmail2>Email</label> <input type=email class=form-control id=exampleInputEmail2 placeholder=jane.doe@example.com> </div> <button type=submit class="btn btn-default">Send invitation</button> </form> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt>&lt;form</span> <span class=na>class=</span><span class=s>"form-inline"</span><span class=nt>&gt;</span>
   <span class=nt>&lt;div</span> <span class=na>class=</span><span class=s>"form-group"</span><span class=nt>&gt;</span>
     <span class=nt>&lt;label</span> <span class=na>for=</span><span class=s>"exampleInputName2"</span><span class=nt>&gt;</span>Name<span class=nt>&lt;/label&gt;</span>
     <span class=nt>&lt;input</span> <span class=na>type=</span><span class=s>"text"</span> <span class=na>class=</span><span class=s>"form-control"</span> <span class=na>id=</span><span class=s>"exampleInputName2"</span> <span class=na>placeholder=</span><span class=s>"Jane Doe"</span><span class=nt>&gt;</span>