如何有一个float：right元素与一个文本块没有文本重叠在引导3 [英] How to have a float:right element with a text block without the text overlapping on it in bootstrap 3

问题描述

我是网络开发的新手。

这里，编辑部分可以是任何宽度，文本块可以是任何高度。

我尝试过类似这样的操作

HTML

;
< div class =form-group>
< label for =textclass =col-sm-4 control-label>地址< / label>
< div class =col-sm-8 clearfix>
<？php if（$ condition）{？>
< span class =settings>
< i class =glyphicon glyphicon-pencil>< / i>编辑
< / 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在varius elit。前庭sed mollis tellus。 Nullam id magna ligula，quis elementum turpis。 Morbi felis felis，vestibulum dictum mattis commodo，suscipit et nunc。 Fusce在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 ullamcor er 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; 
} 
  

我不想修改任何元素的高度或宽度， href =http://stackoverflow.com/questions/6301719/prevent-absolutely-positioned-elements-from-overlapping-with-text>这里，因为我的布局是响应。请查看我的小提琴，如果可能，请更新。提前感谢。

解决方案

我更新了fiddle.Were你试图实现。检查他们。

 < form class =form-horizo​​ntal form-group-sm> 
< div class =form-group> 
< label for =textclass =col-sm-3 control-label>地址< / 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/

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.

解决方案

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/

这篇关于如何有一个float：right元素与一个文本块没有文本重叠在引导3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！