How to have a float:right element with a text block without the text overlapping on it in bootstrap 3

问题

I am new to web development. I want achieve something like this.

Here, the "Edit" portion can be of any width and the text block can be of any height. Irrespective of any height or width, I want to keep the layout the same.

I have tried something like this

HTML

<form class="form-horizontal form-group-sm">
<div class="form-group">
    <label for="text" class="col-sm-4 control-label">Address</label>
    <div class="col-sm-8 clearfix">
        <?php if($condition) { ?> 
        <span class="settings">
          <i class="glyphicon glyphicon-pencil"></i>Edit
        </span>
        <?php } ?>
        <label class="form-control-static">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique elit ac dolor elementum sit amet tempus ante euismod. Aenean quis enim urna, non pulvinar nunc. Aenean in varius elit. Vestibulum sed mollis tellus. Nullam id magna ligula, quis elementum turpis. Morbi felis felis, vestibulum dictum mattis commodo, suscipit et nunc. Fusce in semper nisi. Vivamus et sem velit, sed sagittis turpis. Aenean sollicitudin elit sed eros posuere id vehicula ipsum tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi diam odio, tempus sed sollicitudin eu, ullamcorper ullamcorper erat. Nullam tortor dolor, porttitor eget feugiat nec, aliquet non orci. Integer eros risus, luctus in mollis quis, scelerisque quis odio. Fusce vehicula sagittis justo, sit amet mollis sem adipiscing a. Sed semper, dui sed convallis interdum, libero felis posuere est, at pulvinar orci felis et lectus.</label>
    </div>
</div>

CSS

.form-control-static{word-wrap: break-word;}
.settings{
    float: right;
    padding: 7px 0 7px 3px;
}

I do not want to fix height or width of any element as shown here since my layout is responsive. Checkout my fiddle and please update it if possible. Thanks in advance.

回答1:

I have updated the fiddle.Were you trying to achieve that.Check them.

<form class="form-horizontal form-group-sm">
 <div class="form-group">
  <label for="text" class="col-sm-3 control-label">Address</label>
  <div class="col-sm-8 clearfix">
   <label class="form-control-static">
    <button class="btn btn-default btn-xs pull-right">edit</button>
     Lorem ipsum    
   </label>
  </div>
 </div>

UPDATED FIDDLE

http://jsfiddle.net/u83gse13/5/

来源：https://stackoverflow.com/questions/29333278/how-to-have-a-floatright-element-with-a-text-block-without-the-text-overlapping

标签

css3

twitter-bootstrap-3

responsive-design