CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Robert Benedetto
Robert Benedetto

Reputation: 1720

Bootstrap labels are not wrapped in the DIV?

My Bootstrap labels are not being wrapped in my DIV as expected? They just keep going off the screen? Does anyone have any idea why? I have included a screenshot, and the code is below:

<div class="container" style="margin-top:100px;">
      <div class="row">
        <div class="col-md-12">
            <div class="pull-right form-inline">
                <div id="ctl00_ContentPlaceHolder1_divParkingArea" class="form-group">
                <label>Parking Area:</label><br />
                <select name="ctl00$ContentPlaceHolder1$ddParkingArea" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$ddParkingArea\&#39;,\&#39;\&#39;)&#39;, 0)" id="ctl00_ContentPlaceHolder1_ddParkingArea" class="form-control" style="width: 200px; float: left;">
                     <option selected="selected" value="7">Test Parking Area XXX</option>
                     <option value="5">Tower A Parking</option>
                     <option value="6">Tower B Parking</option>

                </select>
                </div>                  
            </div>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-12">
            <div class="well" style="background: #fff;">
                <div id="ctl00_ContentPlaceHolder1_parkingAreaOverview" style="width:600px;"><h3>Level 2</h3><hr><span class="label label-success">SlotSlotSlotSlot 11</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 22</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 33</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 44</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 55</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 66</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 77</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 88</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 99</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 111</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 222</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 333</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 444</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 555</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 666</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 777</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 888</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 999</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 000</span><br /><br /><br /><h3>Level 1</h3><hr><span class="label label-success">SlotSlotSlotSlot 1</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 2</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 3</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 4</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 5</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 6</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 7</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 8</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 9</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 10</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 11</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 12</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 13</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 14</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 15</span></div>
            </div>
        </div>
    </div>

Why is it acting like this

Hope you can give me a hint! Thanks!

Regards,

Bob

EDIT:

1) removed the &nbsp as suggested, and it worked fine! But...

2) Added margin-top and margin-right to get some space, and a popup to some of the labels, and now the results look the same again? See below:

<div class="container" style="margin-top:100px;">
      <div class="row">
        <div class="col-md-12">
            <div class="pull-right form-inline">
                <div id="ctl00_ContentPlaceHolder1_divParkingArea" class="form-group">
                <label>Parking Area:</label><br />
                <select name="ctl00$ContentPlaceHolder1$ddParkingArea" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$ddParkingArea\&#39;,\&#39;\&#39;)&#39;, 0)" id="ctl00_ContentPlaceHolder1_ddParkingArea" class="form-control" style="width: 200px; float: left;">
<option selected="selected" value="7">Test Parking Area XXX</option>
<option value="5">Tower A Parking</option>
<option value="6">Tower B Parking</option>

</select>
                </div>                  
            </div>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-12">
            <div class="well" style="background: #fff;">
                <div id="ctl00_ContentPlaceHolder1_parkingAreaOverview"><h3>Level 2</h3><hr><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 11</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 22</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 33</span><span class="label label-default" style="margin-right:5px; margin-top:5px; color:#000;"><a style="color:#fff;" href="#" id="slotPopup199" data-toggle="popover" title="SlotSlotSlotSlot 44" data-content="Connected to: Tower A, 1022B (10F)">SlotSlotSlotSlot 44</a></span><span class="label label-default" style="margin-right:5px; margin-top:5px; color:#000;"><a style="color:#fff;" href="#" id="slotPopup200" data-toggle="popover" title="SlotSlotSlotSlot 55" data-content="Connected to: Tower A, 1022B (10F)">SlotSlotSlotSlot 55</a></span><span class="label label-default" style="margin-right:5px; margin-top:5px; color:#000;"><a style="color:#fff;" href="#" id="slotPopup201" data-toggle="popover" title="SlotSlotSlotSlot 66" data-content="Connected to: Tower A, 1022B (10F)">SlotSlotSlotSlot 66</a></span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 77</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 88</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 99</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 111</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 222</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 333</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 444</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 555</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 666</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 777</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 888</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 999</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 000</span><br /><br /><br /><h3>Level 1</h3><hr><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 1</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 2</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 3</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 4</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 5</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 6</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 7</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 8</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 9</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 10</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 11</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 12</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 13</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 14</span><span class="label label-success" style="margin-right:5px; margin-top:5px;">SlotSlotSlotSlot 15</span></div>
            </div>
        </div>
    </div>

Upvotes: 6

Views: 3923

Answers (2)

BBekyarov
BBekyarov

Reputation: 187

You can still use &nbsp as you do if you don't want to mess with adding css styles, but you have to set "word-wrap:break-word" at the parent DIV style as follows

<div class="container" style="margin-top:100px;">
      <div class="row">
        <div class="col-md-12">
            <div class="pull-right form-inline">
                <div id="ctl00_ContentPlaceHolder1_divParkingArea" class="form-group">
                <label>Parking Area:</label><br />
                <select name="ctl00$ContentPlaceHolder1$ddParkingArea" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$ContentPlaceHolder1$ddParkingArea\&#39;,\&#39;\&#39;)&#39;, 0)" id="ctl00_ContentPlaceHolder1_ddParkingArea" class="form-control" style="width: 200px; float: left;">
                     <option selected="selected" value="7">Test Parking Area XXX</option>
                     <option value="5">Tower A Parking</option>
                     <option value="6">Tower B Parking</option>

                </select>
                </div>                  
            </div>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-12">
            <div class="well" style="background: #fff;">
                <div id="ctl00_ContentPlaceHolder1_parkingAreaOverview" style="width:600px;word-wrap:break-word"><h3>Level 2</h3><hr><span class="label label-success">SlotSlotSlotSlot 11</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 22</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 33</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 44</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 55</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 66</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 77</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 88</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 99</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 111</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 222</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 333</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 444</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 555</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 666</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 777</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 888</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 999</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 000</span><br /><br /><br /><h3>Level 1</h3><hr><span class="label label-success">SlotSlotSlotSlot 1</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 2</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 3</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 4</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 5</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 6</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 7</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 8</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 9</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 10</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 11</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 12</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 13</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 14</span>&nbsp;&nbsp;<span class="label label-success">SlotSlotSlotSlot 15</span></div>
            </div>
        </div>
    </div>

Upvotes: 1

Steve Sanders
Steve Sanders

Reputation: 8651

It is because of your use of &nbsp;, it is all read as one line. You should replace them with regular spaces and use css margins if you need additional space in between each item.

<span class="label label-success">SlotSlotSlotSlot 11</span> <span class="label label-success">SlotSlotSlotSlot 22</span> <span class="label label-success">SlotSlotSlotSlot 33</span> <span class="label label-success">SlotSlotSlotSlot 44</span> <span class="label label-success">SlotSlotSlotSlot 55</span> <span class="label label-success">SlotSlotSlotSlot 66</span> <span class="label label-success">SlotSlotSlotSlot 77</span>

http://jsfiddle.net/f5ME3/

By definition, non-breaking spaces prevent line breaks.

(&nbsp), is a variant of the space character that prevents an automatic line break (line wrap) at its position

Source: http://en.wikipedia.org/wiki/Non-breaking_space

Upvotes: 6

Related Questions