Question

我正在尝试将文本输入对齐到右边，由于某种原因它没有这样做。

我在style="text-align: right"

中使用了<td>

参见示例：

代码

<table class="table">
  <thead>
    <tr>
      <th>Field 1</th>
      <th style="text-align:right">Field 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>

      <td style="text-align: right">
        <div class="form-group" style="text-align: right">
          <input style="width:60px" type="number" class="form-control" value="test">
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

无需额外的CSS 只需使用Bootstrap <div class="form-group"> <input style="width:60px" type="number" class="form-control pull-right" value="test"> </div>：

https://jsfiddle.net/cp1tvuj3/

text-right

Updated fiddle

form-control无效，因为display: block为import React, { Component } from 'react'; import { AppRegistry, TouchableOpacity, TextInput, Text, View } from 'react-native'; export default class keypost extends Component { constructor(props) { super(props); this.state = { part: '', update: true }; } myfunc() { this.setState({ part: <Text><Text style={{ color: 'blue' }}>"thivishnu_ks_is_good_boyo lllllll COurs uad is sfd_sdf llllsdf sfsddfadfadsfadsff dsafdfas"</Text> <Text>"fasdfa sjsjsjs jsjsjsj sjsjshshshsshshss"</Text></Text> }) } render() { var parts = this.state.part return ( <View style={{ paddingTop: 50 }}> <TextInput multiline={true} style={{ height: 300 }} > <Text>{parts}</Text> </TextInput> <TouchableOpacity style={{ height: 100, width: 100 }} onPress={this.myfunc.bind(this)} > <Text style={{}}> Push Me </Text> </TouchableOpacity> </View> ); } }

最初的问题是针对Bootstrap 3.在Bootstrap 4中，pull-right is now float-right。

Answer 2

将内联块添加到div元素中，默认情况下div是块元素，因此它占用其父元素的完整宽度

 <div class="form-group" style="text-align: right;display:inline-block;">
          <input style="width:60px" type="number" class="form-control" value="test">
 </div>

https://jsfiddle.net/RACCH/y9fvo4dj/

Answer 3

似乎只需添加float: right;即可，请参阅

url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>Field 1</th>
      <th style="text-align:right">Field 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>      
      <td style="text-align: right">
        <div class="form-group" style="text-align: right; float:right">
          <input style="width:60px" type="number" class="form-control" value="test">
        </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 4

将td中输入字段的div赋予

样式

display:inline-block;

还可以解决您的问题，而不会有任何浮动可能会破坏其他内容。

https://jsfiddle.net/DTcHh/31202/

Answer 5

你需要添加bootstrap类即。＆＃34;右拉＆＃34; 找到代码小提琴：

    `https://jsfiddle.net/DTcHh/31204/e`

Answer 6

这两个解决方案适合我使用 Bootstrap 4 表：

或者：

<td>
    <div class="float-right">
        <input>
    </div>
</td>

或者：

<td class="text-right">
    <div class="d-inline-flex">
        <input>
    </div>
</td>

在td中将文本输入对齐到右边？

6 个答案: